Sidebar: Add chevron

Author: nginx-jack

assets/css/v2/style.css

@@ -768,7 +768,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   padding: 0;
   list-style: none;
   font-weight: 400;
-  font-size: 1rem;
+  font-size: 0.875rem;
 }
 
 .sidebar__container button {
@@ -788,15 +788,36 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
 }
 
 .sidebar__toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
   cursor: pointer;
   background: none;
   border: none;
   width: 100%;
   text-align: left;
-  padding: 0.25rem 0.75rem;
+  padding: 0.25rem 0.5rem;
   border-radius: 5px;
 }
 
+.sidebar__chevron {
+  display: flex;
+  align-items: center;
+}
+
+.sidebar__chevron svg {
+  margin-right: -0.325rem;
+  stroke-width: 1.5;
+}
+
+.sidebar__chevron--open {
+  transform: rotate(90deg);
+}
+
+.sidebar__toggle:has(.sidebar__chevron) {
+  padding-left: .4rem;
+}
+
 .sidebar__link {
   display: block;
   padding: 0.25rem 0.75rem;
@@ -810,6 +831,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon {
   color: oklch(var(--color-brand) / 1);
   background-color: oklch(var(--color-brand) / 0.1);
   font-weight: 600;
+  width: fit-content;
 }
 
 .sidebar__toc {

assets/js/sidebar-v2.js

@@ -1,14 +1,21 @@
-document.addEventListener('DOMContentLoaded', () => {
-  const toggles = document.querySelectorAll('.sidebar__toggle');
+document.addEventListener('click', (e) => {
+  const toggle = e.target.closest('.sidebar__toggle');
+  if (toggle) {
+    const chevron = toggle.querySelector('.sidebar__chevron');
+    const expanded = toggle.getAttribute('aria-expanded') === 'true';
+    const panel = document.getElementById(toggle.getAttribute('aria-controls'));
 
-  toggles.forEach((toggle) => {
-    const parent = toggle.closest('li.sidebar__section');
-    const children = parent.querySelector('.sidebar__children');
+    // Toggle the expanded state
+    toggle.setAttribute('aria-expanded', String(!expanded));
 
-    toggle.addEventListener('click', () => {
-      const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
-      toggle.setAttribute('aria-expanded', !isExpanded);
-      children.hidden = isExpanded;
-    });
-  });
+    // 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

@@ -9,28 +9,27 @@
     {{- $isAncestor := .IsAncestor $currentPage -}}
     {{- $shouldExpand := or $onPage $isAncestor -}}
     {{- $sectionID := printf "section-%s" (urlize .Permalink) -}}
-
     {{ if eq .Kind "section" }}
-      <li class="sidebar__section">
-        <button
-          class="sidebar__toggle"
-          aria-expanded="{{ $shouldExpand }}"
-          aria-controls="{{ $sectionID }}"
-        >
-          {{ .Title }}
-        </button>
-
-        <div
-          id="{{ $sectionID }}"
-          class="sidebar__children"
-          {{ if not $shouldExpand }}hidden{{ end }}
-        >
-          {{ partial "sidebar-list.html" (dict
-            "firstSection" . "currentUrl" $currentUrl "currentPage" $currentPage)
-          }}
-        </div>
-      </li>
-
+    <li class="sidebar__section">
+      <button
+        class="sidebar__toggle"
+        aria-expanded="{{ $shouldExpand }}"
+        aria-controls="{{ $sectionID }}"
+      >
+        <span class="sidebar__chevron {{ if $shouldExpand }}sidebar__chevron--open{{ end }}">
+          {{ partial "lucide" (dict "context" . "icon" "chevron-right") }}
+        </span>
+        <span class="sidebar__toggle-text">{{ .Title }}</span>
+      </button>
+      <div
+        id="{{ $sectionID }}"
+        class="sidebar__children"
+        {{ if not $shouldExpand }}hidden{{ end }}
+      >
+        {{ partial "sidebar-list.html" (dict 
+          "firstSection" . "currentUrl" $currentUrl "currentPage" $currentPage) }}
+      </div>
+    </li>
     {{ else if eq .Kind "page" }}
       <li class="sidebar__page">
         <a
@@ -46,6 +45,7 @@
           {{ end }}
         {{ end }}
       </li>
+      
     {{ end }}
   {{ end }}
 </ul>