Menu for mobile

Author: salian

public/assets/css/site.css

@@ -88,6 +88,7 @@ a:hover {
 }
 
 
+
 .content-area {
     min-width: 0;
     display: flex;
@@ -1216,6 +1217,10 @@ input[type="file"]::-webkit-file-upload-button:hover {
     z-index: 10;
 }
 
+.sidebar-overlay {
+    display: none;
+}
+
 .sidebar-brand {
     color: var(--brand-mark);
     margin-bottom: 12px;
@@ -1540,13 +1545,46 @@ input[type="file"]::-webkit-file-upload-button:hover {
     }
 
     .sidebar {
-        position: static;
-        min-width: 100%;
-        width: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: min(84vw, 320px);
         border-left: none;
-        border-right: none;
+        border-right: 1px solid var(--border);
         border-radius: 0;
-        height: auto;
+        transform: translateX(-110%);
+        transition: transform 0.25s ease;
+        z-index: 20;
+        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
+    }
+
+    .page.has-sidebar.sidebar-collapsed .sidebar {
+        transform: translateX(-110%);
+    }
+
+    .page.sidebar-open .sidebar {
+        transform: translateX(0);
+    }
+
+    .page.sidebar-open {
+        overflow: hidden;
+    }
+
+    .sidebar-overlay {
+        position: fixed;
+        inset: 0;
+        background: rgba(12, 18, 28, 0.5);
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease;
+        z-index: 10;
+    }
+
+    .page.sidebar-open .sidebar-overlay {
+        display: block;
+        opacity: 1;
+        pointer-events: auto;
     }
 
 
@@ -1559,6 +1597,20 @@ input[type="file"]::-webkit-file-upload-button:hover {
         padding: 18px 0;
     }
 
+    .nav {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+        padding-right: 8px;
+    }
+
+    .nav a,
+    .nav details,
+    .nav form {
+        margin-left: 0;
+    }
+
     .footer-content {
         flex-direction: column;
         align-items: flex-start;

public/assets/js/ui.js

@@ -1,21 +1,65 @@
 (() => {
   const page = document.querySelector('.page');
   const toggle = document.querySelector('[data-sidebar-toggle]');
+  const overlay = document.querySelector('[data-sidebar-overlay]');
   if (!page || !toggle) {
     return;
   }
 
-  const stored = localStorage.getItem('thriftstack_sidebar');
-  if (stored === 'collapsed') {
-    page.classList.add('sidebar-collapsed');
-    toggle.setAttribute('aria-pressed', 'true');
-  }
+  const media = window.matchMedia('(max-width: 768px)');
+
+  const applyState = () => {
+    if (media.matches) {
+      page.classList.add('sidebar-collapsed');
+      page.classList.remove('sidebar-open');
+      toggle.setAttribute('aria-pressed', 'false');
+      return;
+    }
+    page.classList.remove('sidebar-open');
+    const stored = localStorage.getItem('thriftstack_sidebar');
+    if (stored === 'collapsed') {
+      page.classList.add('sidebar-collapsed');
+      toggle.setAttribute('aria-pressed', 'true');
+    } else {
+      page.classList.remove('sidebar-collapsed');
+      toggle.setAttribute('aria-pressed', 'false');
+    }
+  };
 
   toggle.addEventListener('click', () => {
+    if (media.matches) {
+      const isOpen = page.classList.toggle('sidebar-open');
+      page.classList.toggle('sidebar-collapsed', !isOpen);
+      toggle.setAttribute('aria-pressed', isOpen ? 'true' : 'false');
+      return;
+    }
     const collapsed = page.classList.toggle('sidebar-collapsed');
     toggle.setAttribute('aria-pressed', collapsed ? 'true' : 'false');
     localStorage.setItem('thriftstack_sidebar', collapsed ? 'collapsed' : 'expanded');
   });
+
+  if (overlay) {
+    overlay.addEventListener('click', () => {
+      page.classList.remove('sidebar-open');
+      page.classList.add('sidebar-collapsed');
+      toggle.setAttribute('aria-pressed', 'false');
+    });
+  }
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && page.classList.contains('sidebar-open')) {
+      page.classList.remove('sidebar-open');
+      page.classList.add('sidebar-collapsed');
+      toggle.setAttribute('aria-pressed', 'false');
+    }
+  });
+
+  if (typeof media.addEventListener === 'function') {
+    media.addEventListener('change', applyState);
+  } else if (typeof media.addListener === 'function') {
+    media.addListener(applyState);
+  }
+  applyState();
 })();
 
 (() => {

views/layouts/app.php

@@ -110,6 +110,7 @@
                     </nav>
                 </div>
             </aside>
+            <div class="sidebar-overlay" data-sidebar-overlay></div>
         <?php endif; ?>
         <div class="content-area">
             <header class="site-header">