settings-site: phase 7 mobile responsiveness

settings-site/public/js/app.js

@@ -510,6 +510,7 @@ function setupSidebarRouting() {
     if (!a) return;
     e.preventDefault();
     navigate(a.getAttribute('href'));
+    if (isMobileViewport()) setSidebarOpen(false);
   });
 
   window.addEventListener('popstate', () => {
@@ -517,9 +518,42 @@ function setupSidebarRouting() {
   });
 }
 
+const MOBILE_BREAKPOINT = 900;
+
+function isMobileViewport() {
+  return window.innerWidth <= MOBILE_BREAKPOINT;
+}
+
+function setSidebarOpen(open) {
+  document.body.classList.toggle('sidebar-open', open);
+  const toggle = document.getElementById('menu-toggle');
+  if (toggle) toggle.setAttribute('aria-expanded', String(open));
+}
+
+function setupMobileNav() {
+  const toggle = document.getElementById('menu-toggle');
+  const backdrop = document.getElementById('sidebar-backdrop');
+
+  toggle?.addEventListener('click', () => {
+    setSidebarOpen(!document.body.classList.contains('sidebar-open'));
+  });
+  backdrop?.addEventListener('click', () => setSidebarOpen(false));
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && document.body.classList.contains('sidebar-open')) {
+      setSidebarOpen(false);
+    }
+  });
+  window.addEventListener('resize', () => {
+    if (!isMobileViewport() && document.body.classList.contains('sidebar-open')) {
+      setSidebarOpen(false);
+    }
+  });
+}
+
 document.addEventListener('DOMContentLoaded', async () => {
   setupSidebarRouting();
   setupActionButtons();
+  setupMobileNav();
   await init();
   navigate(location.pathname, false);
 });