Sidebar: Fixed all bugs + improved UX

Author: lamATnginx

assets/css/v2/style.css

@@ -91,6 +91,7 @@
   --sidebar-line-box-left: 12px;
   --sidebar-width: 22rem;
   --sidebar-line-width: 11.5px;
+  --sidebar-mobile-top-displacement: 3rem;
   --side-gutter-width: 20rem;
   --table-top-bottom-spacing: 1rem;
   --table-row-space-between: 1.5rem;
@@ -527,39 +528,68 @@ nav {
   }
 
   body:has(#sidebar-v2[style*="block"]) {
+    /* 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 !important;
+      align-items: center;
+      position: sticky;
+      top: 1rem;
+      margin-top: 2rem;
+      padding: 0.5rem;
+      color: white;
+      background-color: oklch(var(--color-brand));
+    }
+  }
+
+  .breadcrumb .sidebar-mobile-toggle {
+    display: inline !important;
+  }
+
+  .sidebar-mobile-toggle {
+    background-color: transparent;
+    border: none;
+
+    .lucide {
+      width: 1rem;
+      height: 1rem;
+      margin-right: 1rem;
+    }
   }
 
   .main-layout {
+    /* Mobile support for sidebar */
     display: flex;
     flex-direction: column;
     position: relative;
 
     .sidebar-layout {
       min-height: fit-content;
-      position: sticky;
-      top: 0;
-      padding: 1rem;
-      background-color: white;
+      background: white;
+      z-index: 3;
       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;
+        padding: 0;
+        top: var(--sidebar-mobile-top-displacement);
+        max-height: calc(100vh - var(--sidebar-mobile-top-displacement));
 
         .sidebar__container {
           width: 100%;
@@ -981,6 +1011,16 @@ p {
   line-height: 1.5rem;
 }
 
+.breadcrumb-layout {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+  background-color: white;
+  width: calc(100% + 4rem);
+  margin-left: -2rem;
+  padding: 1rem 2rem;
+}
+
 .breadcrumb {
   color: var(--color-foreground);
   text-decoration: none;

layouts/_default/docs.html

@@ -69,8 +69,8 @@
 
   <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;">
+      <button class="sidebar-mobile-toggle" style="display: none;" aria-expanded="false">{{ partial "lucide" (dict "context" . "icon" "x")}}Close</button>
+      <nav data-mf="true" id="sidebar-v2" class="sidebar">
         {{ partial "sidebar-v2.html" . }}
       </nav>
     </div>

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" style="display: none;">{{ partial "lucide" (dict "context" . "icon" "align-justify") }}</button>
             <li><a href="/" alt="NGINX Docs Home">Home</a></li>
             {{- define "breadcrumb" -}}
             {{- with .Parent -}}