fix(navigation): align sidebar and breadcrumbs with active topic (#32)

* fix(navigation): reveal active sidebar topic

* fix(navigation): use readable breadcrumb labels

Author: shalshcode08

build.js

@@ -245,12 +245,26 @@ function extractSections(html) {
 
 function buildBreadcrumb(pagePath) {
   const parts = pagePath.split("/");
+  const topic = manifest.topics.find((candidate) =>
+    candidate.pages.some((page) => page.path === pagePath),
+  );
+  const page = topic && topic.pages.find((candidate) => candidate.path === pagePath);
+  const labels = parts.map((segment) =>
+    segment
+      .split("-")
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(" "),
+  );
+
+  if (topic) labels[0] = topic.name;
+  if (page) labels[labels.length - 1] = page.title;
+
   const out = [];
-  parts.forEach((seg, i) => {
-    const last = i === parts.length - 1;
+  labels.forEach((label, i) => {
+    const last = i === labels.length - 1;
     // Parent crumbs + separators drop away on narrow screens; the current page always stays.
     if (i > 0) out.push(`<span class="crumb-hide">/</span>`);
-    out.push(`<span class="${last ? "here" : "crumb-hide"}">${seg}</span>`);
+    out.push(`<span class="${last ? "here" : "crumb-hide"}">${label}</span>`);
   });
   return out.join("");
 }

src/shell.html

@@ -166,7 +166,9 @@
         var collapsedNavGroups = readCollapsedNavGroups();
         document.querySelectorAll(".nav-group-toggle").forEach(function (btn) {
           var key = btn.dataset.navKey;
-          if (key && collapsedNavGroups.indexOf(key) !== -1) {
+          var group = btn.closest(".nav-group");
+          var containsActiveLink = group && group.querySelector("a.active");
+          if (key && collapsedNavGroups.indexOf(key) !== -1 && !containsActiveLink) {
             btn.setAttribute("aria-expanded", "false");
           }
 
@@ -196,6 +198,21 @@
           });
         });
 
+        function centerActiveSidebarLink() {
+          if (!sidebar) return;
+          var activeLink = sidebar.querySelector(".nav-group a.active");
+          if (!activeLink) return;
+
+          var sidebarRect = sidebar.getBoundingClientRect();
+          var activeRect = activeLink.getBoundingClientRect();
+          var activeTop = activeRect.top - sidebarRect.top + sidebar.scrollTop;
+          var targetTop = activeTop - (sidebar.clientHeight - activeRect.height) / 2;
+          var maxScrollTop = Math.max(0, sidebar.scrollHeight - sidebar.clientHeight);
+          sidebar.scrollTop = Math.min(Math.max(0, targetTop), maxScrollTop);
+        }
+
+        if (sidebar) window.requestAnimationFrame(centerActiveSidebarLink);
+
         var toTop = document.getElementById("toTop");
         if (toTop) {
           var onScroll = function () {