Sidebar: Mobile support

Author: lamATnginx

assets/css/v2/style.css

@@ -526,8 +526,46 @@ nav {
     column-gap: var(--grid-column-gutter);
   }
 
-  .sidebar-layout {
-    display: none;
+  body:has(#sidebar-v2[style*="block"]) {
+    overflow-y: hidden;
+  }
+
+  .main-layout {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .sidebar-layout {
+      min-height: fit-content;
+      position: sticky;
+      top: 0;
+      padding: 1rem;
+      background-color: white;
+      width: calc(100% + 4rem);
+      margin-left: -2rem;
+      overflow-y: scroll;
+
+      &::before {
+        display: none;
+      }
+
+      .sidebar-mobile-toggle {
+        background-color: oklch(var(--color-brand));
+        color: white;
+        border: none;
+        display: block !important;
+      }
+
+      nav {
+        width: 100%;
+        height: 100vh;
+        display: none;
+
+        .sidebar__container {
+          width: 100%;
+        }
+      }
+    }
   }
 
   main {

assets/js/sidebar-v2.js

@@ -1,5 +1,6 @@
 document.addEventListener('click', (e) => {
   const toggle = e.target.closest('.sidebar__toggle');
+  const sidebarMobileToggle = e.target.closest('.sidebar-mobile-toggle');
   if (toggle) {
     const chevron = toggle.querySelector('.sidebar__chevron');
     const expanded = toggle.getAttribute('aria-expanded') === 'true';
@@ -14,5 +15,15 @@ document.addEventListener('click', (e) => {
     if (chevron) {
       chevron.classList.toggle('sidebar__chevron--open', !expanded);
     }
+  } else if (sidebarMobileToggle) {
+    // Show the sidebar
+    const sidebar = document.getElementById('sidebar-v2');
+    const expanded =
+      sidebarMobileToggle.getAttribute('aria-expanded') === 'true';
+    sidebarMobileToggle.setAttribute('aria-expanded', String(!expanded));
+    sidebar.setAttribute(
+      'style',
+      !expanded ? 'display: block;' : 'display: none;'
+    );
   }
 });

layouts/_default/docs.html

@@ -69,6 +69,7 @@
 
   <section class="main-layout">
     <div class="sidebar-layout" id="sidebar-layout">
+      <button class="sidebar-mobile-toggle" aria-expanded="false" style="display: none;"><p>Click</p></button>
       <nav data-mf="true" id="sidebar-v2" class="sidebar" style="display:none;">
         {{ partial "sidebar-v2.html" . }}
       </nav>