Sidebar: Mobile support (#252)

Author: lamATnginx

assets/css/v2/style.css

@@ -93,6 +93,7 @@
   --sidebar-line-box-left: 12px;
   --sidebar-width: 22rem;
   --sidebar-line-width: 11.5px;
+  --sidebar-mobile-top-displacement: 5rem;
   --side-gutter-width: 20rem;
   --table-top-bottom-spacing: 1rem;
   --table-row-space-between: 1.5rem;
@@ -268,6 +269,10 @@ header {
     padding: 20px 10px;
   }
 
+  .nav-item-explore {
+    margin: 0;
+  }
+
   .navbar-button {
     padding: 0.5rem 0.5rem;
     border: none;
@@ -464,6 +469,10 @@ nav {
   position: relative;
   z-index: 2;
   min-height: 74vh;
+
+  .sidebar__mobile__toggle {
+    display: none;
+  }
 }
 
 .sidebar-layout::before {
@@ -527,8 +536,84 @@ nav {
     column-gap: var(--grid-column-gutter);
   }
 
-  .sidebar-layout {
-    display: none;
+  .content-layout .breadcrumb-layout {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+  }
+
+  body:has(.sidebar__mobile-open) {
+    /* Disable scrolling in main content + hide footer if the sidebar is visible */
+    overflow-y: hidden;
+
+    .sidebar-layout {
+      position: absolute;
+      height: 100%;
+    }
+
+    footer {
+      display: none;
+    }
+
+    .sidebar-layout .sidebar__mobile__toggle {
+      display: flex;
+      align-items: center;
+      position: sticky;
+      top: 1rem;
+      margin-top: 2rem;
+      margin-left: 2rem;
+      margin-right: 2rem;
+      padding: 0.5rem;
+      color: white;
+      background-color: oklch(var(--color-brand));
+    }
+  }
+
+  .sidebar__mobile__toggle {
+    background-color: transparent;
+    border: none;
+
+    .lucide {
+      margin-right: 1rem;
+    }
+  }
+
+  .main-layout {
+    /* Mobile support for sidebar */
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .sidebar-layout {
+      min-height: fit-content;
+      background: white;
+      z-index: 999;
+      width: calc(100% + 4rem);
+      margin-left: -2rem;
+
+      &::before {
+        display: none;
+      }
+
+      nav {
+        width: 100%;
+        display: none;
+        top: var(--sidebar-mobile-top-displacement);
+        max-height: calc(100vh - var(--sidebar-mobile-top-displacement));
+        padding: 0 2rem;
+
+        .sidebar__container {
+          width: 100%;
+        }
+      }
+    }
+
+    .content-layout {
+      .breadcrumb-layout .sidebar__mobile__toggle {
+        display: inline;
+        padding: 0;
+      }
+    }
   }
 
   main {
@@ -773,6 +858,10 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 /* MARK: Sidebar
 */
 
+nav.sidebar.sidebar__mobile-open {
+  display: block;
+}
+
 .sidebar {
   --color-foreground: oklch(0 0 0 / 0.75);
 
@@ -963,6 +1052,18 @@ p {
   line-height: 1.5rem;
 }
 
+.breadcrumb-layout {
+  position: relative;
+  background-color: white;
+  width: calc(100% + 4rem);
+  margin-left: -2rem;
+  padding: 1rem 2rem;
+
+  .sidebar__mobile__toggle {
+    display: none;
+  }
+}
+
 .breadcrumb {
   color: oklch(var(--color-foreground));
   text-decoration: none;

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,48 @@ 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';
+
+    if (!expanded) {
+      sidebar.classList.add('sidebar__mobile-open');
+    } else {
+      sidebar.classList.remove('sidebar__mobile-open');
+    }
+
+    // Set the aria for all the toggle buttons so they are in lockstep
+    const toggleButtons = document.getElementsByClassName(
+      'sidebar__mobile__toggle'
+    );
+    for (const button of [...toggleButtons]) {
+      button.setAttribute('aria-expanded', String(!expanded));
+    }
   }
 });
+
+const debounce = (callback, wait) => {
+  let timeoutId = null;
+  return (...args) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, wait);
+  };
+};
+
+window.addEventListener(
+  'resize',
+  debounce(() => {
+    const sidebar = document.getElementById('sidebar-v2');
+
+    if (
+      window.innerWidth > 88 * 16 &&
+      sidebar.classList.contains('sidebar__mobile-open')
+    ) {
+      sidebar.classList.remove('sidebar__mobile-open');
+    }
+  }, 200)
+);

layouts/_default/docs.html

@@ -69,14 +69,15 @@
 
   <section class="main-layout">
     <div class="sidebar-layout" id="sidebar-layout">
-      <nav data-mf="true" id="sidebar-v2" class="sidebar" style="display:none;">
+      <button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
+      <nav data-mf="true" id="sidebar-v2" class="sidebar">
         {{ partial "sidebar-v2.html" . }}
       </nav>
     </div>
 
     <section id="maincontent" class="content-layout">
       <div data-cms-edit="content" class="text-content">
-        <section class="breadcrumb-layout" data-mf="true" style="display: none;">
+        <section class="breadcrumb-layout wide" data-mf="true" style="display: none;">
           {{ if not .IsHome }}
             {{ if not (in .Params.display_breadcrumb "false" ) }}
             {{ partial "breadcrumb" .}}  

layouts/_default/list.html

@@ -13,14 +13,15 @@
 <main class="content col d-block align-top content-has-toc" role="main" data-mf="true" style="display: none">
 <section class="main-layout">
   <div class="sidebar-layout" id="sidebar-layout">
+    <button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
     <nav data-mf="true" id="sidebar-v2" class="sidebar" style="display:none;">
       {{ partial "sidebar-v2.html" . }}
     </nav>
   </div>
 
   <section id="maincontent" class="content-layout" data-mf="true" style="display: none">
     <div data-cms-edit="content" class="text-content list-page">
-      <section class="breadcrumb-layout">
+      <section class="breadcrumb-layout wide">
         {{ if not .IsHome }}
           {{ if not (in .Params.display_breadcrumb "false" ) }}
           {{ partial "breadcrumb" .}}

layouts/partials/breadcrumb.html

@@ -1,6 +1,7 @@
 <nav aria-label="breadcrumb" class="breadcrumb navbar">
     <div class="nav flex-md-row">
         <ol class="breadcrumb">
+            <button class="sidebar__mobile__toggle" aria-expanded="false" data-mf="true">{{ partial "lucide" (dict "context" . "icon" "align-justify") }}</button>
             <li><a href="/" alt="NGINX Docs Home">Home</a></li>
             {{- define "breadcrumb" -}}
             {{- with .Parent -}}