Sidebar V3 Mobile Support

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: 5rem;
   --side-gutter-width: 20rem;
   --table-top-bottom-spacing: 1rem;
   --table-row-space-between: 1.5rem;
@@ -187,7 +188,7 @@ p {
 ul,
 ol {
   padding: 0;
-  margin: 0.5rem 0 0.5rem 0;
+  margin: 0.5rem 0 0.5rem 1rem;
 }
 
 ul li,
@@ -266,6 +267,10 @@ header {
     padding: 20px 10px;
   }
 
+  .nav-item-explore {
+    margin: 0;
+  }
+
   .navbar-button {
     padding: 0.5rem 0.5rem;
     border: none;
@@ -459,12 +464,11 @@ nav {
 .sidebar-layout {
   display: flex;
   flex-direction: column;
-  position: relative; /* required for absolute-positioned pseudo element */
+  position: relative;
   z-index: 2;
-  min-height: 100vh;
+  min-height: 74vh;
 }
 
-/* this is the complete, corrected CSS you can directly copy/paste clearly: */
 .sidebar-layout::before {
   content: "";
   position: absolute;
@@ -526,8 +530,82 @@ nav {
     column-gap: var(--grid-column-gutter);
   }
 
-  .sidebar-layout {
-    display: none;
+  .breadcrumb-layout {
+    position: sticky !important;
+    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 !important;
+      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));
+    }
+  }
+
+  .breadcrumb .sidebar__mobile__toggle {
+    display: inline !important;
+    padding: 0;
+  }
+
+  .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%;
+        }
+      }
+    }
   }
 
   main {
@@ -785,9 +863,9 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   padding-top: 1.5rem;
   align-items: start;
   overflow-y: auto;
+  overflow-x: hidden;
   color: var(--color-foreground);
 
-  /* Reset/Renormalize lists to remove default browser styling */
   .sidebar__container,
   .sidebar__container button,
   .sidebar__container ul,
@@ -913,6 +991,12 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
         padding: 0.25rem 0.75rem;
       }
 
+      /* handles bug in hugo where non-rendered headers cause empty li */
+      /* https://github.com/gohugoio/hugo/issues/7128 */
+      li:empty {
+        display: none;
+      }
+
       li:first-child {
         padding-top: 0;
       }
@@ -928,6 +1012,10 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   }
 }
 
+.sidebar__mobile-open {
+  display: block !important;
+}
+
 /* MARK: Content
 */
 
@@ -936,6 +1024,14 @@ p {
   line-height: 1.5rem;
 }
 
+.breadcrumb-layout {
+  position: relative;
+  background-color: white;
+  width: calc(100% + 4rem);
+  margin-left: -2rem;
+  padding: 1rem 2rem;
+}
+
 .breadcrumb {
   color: var(--color-foreground);
   text-decoration: none;
@@ -1481,10 +1577,8 @@ a:has(code:not(pre code)) {
   padding: 0.15rem 0.5rem;
   font-size: 0.75rem;
   z-index: 999;
-  /* position: absolute; */
   background-color: white;
   margin: 0 0 -1px 0;
-  /* box-shadow: 2px 2px 0px var(--color-shadow); */
 }
 
 .code-container {
@@ -1636,7 +1730,7 @@ hr {
   background-repeat: no-repeat;
   background-size: contain;
   background-position: left center;
-  width: 200px; /* Adjust the width as needed to fit the logo */
+  width: 200px;
 
   img {
     display: 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,21 +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));
+    }
   }
 });
 
-document.addEventListener('DOMContentLoaded', () => {
-  const sidebar = document.querySelector('.sidebar__ul');
+const debounce = (callback, wait) => {
+  let timeoutId = null;
+  return (...args) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback(...args);
+    }, wait);
+  };
+};
 
-  if (!sidebar) return;
+window.addEventListener(
+  'resize',
+  debounce(() => {
+    const sidebar = document.getElementById('sidebar-v2');
 
-  const activeLink = sidebar.querySelector('.sidebar__link--current');
-
-  if (activeLink) {
-    activeLink.scrollIntoView({
-      behavior: 'auto',
-      block: 'center',
-      inline: 'nearest',
-    });
-  }
-});
+    if (
+      window.innerWidth > 88 * 16 &&
+      sidebar.classList.contains('sidebar__mobile-open')
+    ) {
+      sidebar.classList.remove('sidebar__mobile-open');
+    }
+  }, 200)
+);

exampleSite/content/test-product/sidebar/nesting-1b/_index.md

@@ -2,3 +2,6 @@
 description: Nesting-1b
 title: Nesting-1b
 ---
+
+1b has some content, but also some nested stuff. 
+This should cause an overview page to render.

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" 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>
 
     <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" style="display: none;" aria-expanded="false">{{ 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" 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 -}}

layouts/partials/sidebar-list.html

@@ -2,21 +2,17 @@
 {{ $currentPage := .currentPage }}
 {{ $firstSection := .firstSection }}
 {{ $idPrefix := .idPrefix }}
-
 {{ with $firstSection }}
 <ul class="sidebar__ul">
   {{ $pages := .Pages.ByWeight }}
   {{ range $index, $p := $pages }}
     {{- $onPage := eq $currentUrl $p.Permalink -}}
     {{- $isAncestor := $p.IsAncestor $currentPage -}}
     {{- $shouldExpand := or $onPage $isAncestor -}}
-    {{/*  These variables are used to create a unique id to be attached to every link
-    that accessibility users can correctly "Skip Table Of Contents"  */}}
     {{- $sectionID := printf "%ssection-%s" $idPrefix (urlize $p.Permalink) -}}
     {{- $linkID := printf "%slink-%s" $idPrefix (urlize $p.Permalink) -}}
     {{- $nextIndex := add $index 1 -}}
     {{- $nextLink := index $pages $nextIndex -}}
-
     {{ if eq $p.Kind "section" }}
       <li class="sidebar__section">
         <button
@@ -35,6 +31,20 @@
           class="sidebar__children"
           {{ if not $shouldExpand }}hidden{{ end }}
         >
+        {{ if and .Content (gt (len .Pages) 0) }}
+            <ul>
+              <li class="sidebar__page">
+                <a
+                  href="{{ $p.Permalink }}"
+                  class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
+                  {{ if $onPage }}aria-current="page"{{ end }}
+                >
+                  Overview
+                </a>
+              </li>
+            </ul>
+          {{ end }}
+
           {{ partial "sidebar-list.html" (dict
             "firstSection" $p
             "currentUrl" $currentUrl
@@ -43,7 +53,6 @@
           ) }}
         </div>
       </li>
-
     {{ else if eq $p.Kind "page" }}
       {{- $tocHasItems := (in $p.TableOfContents "<li>") -}}
       {{- $pageHasTOC := (and $onPage $tocHasItems $p.Params.toc) -}}
@@ -82,15 +91,6 @@
         {{ end }}
       </li>
     {{ end }}
-
   {{ end }}
 </ul>
-{{ end }}
-
-{{/*  {{ if gt (.WordCount) 0 }}
-<ul>
-  <li>
-    <a href="{{ .Permalink }}" style="color: purple; {{if $onPage}}font-weight: bold;{{end}}">{{ .Title }} - Overview</a>
-  </li>
-</ul>
-{{ end }}  */}}
+{{ end }}