Update public/app.js

public/app.js

@@ -142,8 +142,30 @@
     if (e.key !== 'Escape') return;
     const opened = Array.from(document.querySelectorAll('.modal-overlay')).filter((o) => !o.classList.contains('hidden'));
     if (opened.length) closeModal(opened[opened.length - 1].id);
+    else closeSidebar();
   });
 
+  // ---------- MOBILE SIDEBAR ----------
+  function openSidebar() {
+    $('sidebar').classList.add('open');
+    $('sidebarBackdrop').classList.remove('hidden');
+    $('mobileMenuBtn').setAttribute('aria-expanded', 'true');
+  }
+
+  function closeSidebar() {
+    $('sidebar').classList.remove('open');
+    $('sidebarBackdrop').classList.add('hidden');
+    $('mobileMenuBtn').setAttribute('aria-expanded', 'false');
+  }
+
+  function toggleSidebar() {
+    if ($('sidebar').classList.contains('open')) closeSidebar();
+    else openSidebar();
+  }
+
+  $('mobileMenuBtn').addEventListener('click', toggleSidebar);
+  $('sidebarBackdrop').addEventListener('click', closeSidebar);
+
   // ---------- FILTER ----------
   function filtered() {
     let list = state.prompts.slice();
@@ -537,7 +559,7 @@
   // ---------- NAV ----------
   document.querySelectorAll('.nav-item').forEach((n) => {
     n.addEventListener('click', async () => {
-      if (n.dataset.action === 'open-settings') { openSettings(); return; }
+      if (n.dataset.action === 'open-settings') { closeSidebar(); openSettings(); return; }
       const v = n.dataset.view;
       if (!v) return;
       state.view = v;
@@ -547,6 +569,7 @@
         try { await loadImages(); } catch (err) { toast(err.message || String(err), 'error'); }
       }
       render();
+      closeSidebar();
     });
   });
 
@@ -882,4 +905,4 @@
     }
     render();
   })();
-})();
+})();