feat: implement collapsible sidebar groups with local storage support (#23)

Author: shalshcode08

build.js

@@ -156,8 +156,10 @@ function rootPrefix(pagePath) {
 
 function buildSidebar(activePath, prefix) {
   return manifest.topics
-    .map((topic) => {
+    .map((topic, topicIndex) => {
       const collapsible = topic.pages.length > SIDEBAR_VISIBLE;
+      const groupId = `sidebar-group-${topicIndex}`;
+      const storageKey = encodeURIComponent(topic.name);
       // Never hide the page you're on — expand the group if it lives in the tail.
       const activeIdx = topic.pages.findIndex((p) => p.path === activePath);
       const expanded = collapsible && activeIdx >= SIDEBAR_VISIBLE;
@@ -181,8 +183,13 @@ function buildSidebar(activePath, prefix) {
 
       return (
         `      <div ${attrs}>\n` +
-        `        <p class="label">${topic.name}</p>\n` +
-        `        <ul>\n${items}\n        </ul>${more}\n` +
+        `        <button type="button" class="nav-group-toggle label" aria-expanded="true" aria-controls="${groupId}" data-nav-key="${storageKey}">\n` +
+        `          <span>${topic.name}</span>\n` +
+        `          ${chevronDown("nav-group-chevron", 14)}\n` +
+        `        </button>\n` +
+        `        <div class="nav-group-content" id="${groupId}">\n` +
+        `          <ul>\n${items}\n          </ul>${more}\n` +
+        `        </div>\n` +
         `      </div>`
       );
     })

src/shell.html

@@ -135,6 +135,56 @@
             if (e.target.closest("ol a")) setToc(false);
           });
 
+        var navStateKey = "knowledge-base:collapsed-sidebar-groups";
+        if (document.body.classList.contains("is-home")) {
+          try {
+            window.localStorage.removeItem(navStateKey);
+          } catch (e) {
+            // No saved sidebar state exists when storage is unavailable.
+          }
+        }
+
+        function readCollapsedNavGroups() {
+          try {
+            var saved = JSON.parse(window.localStorage.getItem(navStateKey) || "[]");
+            if (!Array.isArray(saved)) return [];
+            return saved.filter(function (key, index) {
+              return typeof key === "string" && saved.indexOf(key) === index;
+            });
+          } catch (e) {
+            return [];
+          }
+        }
+        function writeCollapsedNavGroups(groups) {
+          try {
+            window.localStorage.setItem(navStateKey, JSON.stringify(groups));
+          } catch (e) {
+            // The sidebar still works for this page when storage is unavailable.
+          }
+        }
+
+        var collapsedNavGroups = readCollapsedNavGroups();
+        document.querySelectorAll(".nav-group-toggle").forEach(function (btn) {
+          var key = btn.dataset.navKey;
+          if (key && collapsedNavGroups.indexOf(key) !== -1) {
+            btn.setAttribute("aria-expanded", "false");
+          }
+
+          btn.addEventListener("click", function () {
+            var open = btn.getAttribute("aria-expanded") === "true";
+            btn.setAttribute("aria-expanded", open ? "false" : "true");
+
+            if (!key) return;
+            var savedIndex = collapsedNavGroups.indexOf(key);
+            if (open && savedIndex === -1) {
+              collapsedNavGroups.push(key);
+            } else if (!open && savedIndex !== -1) {
+              collapsedNavGroups.splice(savedIndex, 1);
+            }
+            writeCollapsedNavGroups(collapsedNavGroups);
+          });
+        });
+
         document.querySelectorAll(".show-more").forEach(function (btn) {
           btn.addEventListener("click", function () {
             var open = btn.getAttribute("aria-expanded") === "true";

src/styles.css

@@ -186,6 +186,29 @@ a {
   color: var(--faint);
   margin: 0 0 6px 8px;
 }
+.nav-group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: calc(100% - 8px);
+  padding: 0;
+  border: 0;
+  background: none;
+  line-height: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.nav-group-chevron {
+  display: block;
+  flex: none;
+  transition: transform 0.2s ease;
+}
+.nav-group-toggle[aria-expanded="false"] .nav-group-chevron {
+  transform: rotate(-90deg);
+}
+.nav-group-toggle[aria-expanded="false"] + .nav-group-content {
+  display: none;
+}
 .nav-group ul {
   list-style: none;
   margin: 0;
@@ -843,7 +866,8 @@ footer.doc-footer {
   html {
     scroll-behavior: auto;
   }
-  .sidebar {
+  .sidebar,
+  .nav-group-chevron {
     transition: none;
   }
 }