Sidebar: Show and hide toc

Author: nginx-jack

assets/css/v2/style.css

@@ -885,12 +885,14 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
     }
   }
 
-  .sidebar__link--current {
+  .sidebar__link--current,
+  .sidebar__toggle.sidebar__link--current {
     color: oklch(var(--color-brand) / 1);
     background-color: oklch(var(--color-brand) / 0.1);
     font-weight: 600;
-    display: block; /* Make it stretch horizontally clearly */
-    width: auto; /* reset width clearly */
+    display: flex;
+    justify-self: stretch;
+    width: auto;
     box-sizing: border-box;
   }
 
@@ -901,6 +903,10 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
       border-left: 1px solid var(--color-divider);
       color: oklch(0 0 0 / 0.75);
 
+      &[hidden] {
+        display: none;
+      }
+
       a {
         color: oklch(0 0 0 / 0.75);
         text-decoration: none;

assets/js/sidebar-v2.js

@@ -5,15 +5,12 @@ document.addEventListener('click', (e) => {
     const expanded = toggle.getAttribute('aria-expanded') === 'true';
     const panel = document.getElementById(toggle.getAttribute('aria-controls'));
 
-    // Toggle the expanded state
     toggle.setAttribute('aria-expanded', String(!expanded));
 
-    // Toggle visibility of the content
     if (panel) {
       panel.hidden = expanded;
     }
 
-    // Toggle chevron direction class
     if (chevron) {
       chevron.classList.toggle('sidebar__chevron--open', !expanded);
     }

layouts/partials/sidebar-list.html

@@ -33,20 +33,32 @@
         </div>
       </li>
 
-    {{ else if eq .Kind "page" }}
+      {{ else if eq .Kind "page" }}
       <li class="sidebar__page">
-        <a
-          href="{{ .Permalink }}"
-          class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
-          {{ if $onPage }}aria-current="page"{{ end }}
-        >
-          {{ .Title }}
-        </a>
-
-        {{ if $onPage }}
-          {{ with .TableOfContents }}
-            <div class="sidebar__toc" id="TableOfContents">{{ . }}</div>
-          {{ end }}
+        {{- $pageHasTOC := (and $onPage .TableOfContents) -}}
+        {{- $tocID := printf "toc-%s" (urlize .Permalink) -}}
+        {{- if $pageHasTOC }}
+          <button
+            class="sidebar__toggle sidebar__link sidebar__link--current"
+            aria-expanded="true"
+            aria-controls="{{ $tocID }}"
+          >
+            <span>{{ .Title }}</span>
+            <span class="sidebar__chevron sidebar__chevron--open">
+              {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
+            </span>
+          </button>
+          <div id="{{ $tocID }}" class="sidebar__toc">
+            {{ .TableOfContents }}
+          </div>
+        {{ else }}
+          <a
+            href="{{ .Permalink }}"
+            class="sidebar__link {{ if $onPage }}sidebar__link--current{{ end }}"
+            {{ if $onPage }}aria-current="page"{{ end }}
+          >
+            {{ .Title }}
+          </a>
         {{ end }}
       </li>
     {{ end }}