Sidebar: Fix bug with display none JS

Author: lamATnginx

assets/css/v2/style.css

@@ -537,7 +537,7 @@ nav {
     z-index: 3;
   }
 
-  body:has(#sidebar-v2[style*="block"]) {
+  body:has(.sidebar__mobile-open) {
     /* Disable scrolling in main content + hide footer if the sidebar is visible */
     overflow-y: hidden;
 
@@ -550,7 +550,7 @@ nav {
       display: none;
     }
 
-    .sidebar-layout .sidebar-mobile-toggle {
+    .sidebar-layout .sidebar__mobile__toggle {
       display: flex !important;
       align-items: center;
       position: sticky;
@@ -564,12 +564,12 @@ nav {
     }
   }
 
-  .breadcrumb .sidebar-mobile-toggle {
+  .breadcrumb .sidebar__mobile__toggle {
     display: inline !important;
     padding: 0;
   }
 
-  .sidebar-mobile-toggle {
+  .sidebar__mobile__toggle {
     background-color: transparent;
     border: none;
 
@@ -1007,6 +1007,10 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   }
 }
 
+.sidebar__mobile-open {
+  display: block !important;
+}
+
 /* MARK: Content
 */
 

assets/js/sidebar-v2.js

@@ -1,6 +1,6 @@
 document.addEventListener('click', (e) => {
   const toggle = e.target.closest('.sidebar__toggle');
-  const sidebarMobileToggle = e.target.closest('.sidebar-mobile-toggle');
+  const sidebarMobileToggle = e.target.closest('.sidebar__mobile__toggle');
   if (toggle) {
     const chevron = toggle.querySelector('.sidebar__chevron');
     const expanded = toggle.getAttribute('aria-expanded') === 'true';
@@ -20,14 +20,16 @@ document.addEventListener('click', (e) => {
     const sidebar = document.getElementById('sidebar-v2');
     const expanded =
       sidebarMobileToggle.getAttribute('aria-expanded') === 'true';
-    sidebar.setAttribute(
-      'style',
-      !expanded ? 'display: block;' : 'display: none;'
-    );
+
+    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'
+      'sidebar__mobile__toggle'
     );
     for (const button of [...toggleButtons]) {
       button.setAttribute('aria-expanded', String(!expanded));

layouts/_default/docs.html

@@ -69,7 +69,7 @@
 
   <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>
+      <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>

layouts/_default/list.html

@@ -13,7 +13,7 @@
 <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>
+    <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>

layouts/partials/breadcrumb.html

@@ -1,7 +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>
+            <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 -}}