custom sidebar

Author: feruzm

src/components/Sidebar.astro

@@ -12,7 +12,9 @@ const props = Astro.props as Props;
 </div>
 
 <script client:load>
-  const ACTIVE_SELECTOR = "[data-ecency-sidebar] a[aria-current='page']";
+  const SIDEBAR_SELECTOR = "[data-ecency-sidebar]";
+  const ACTIVE_SELECTOR = `${SIDEBAR_SELECTOR} a[aria-current='page']`;
+  const SECTION_SELECTOR = `${SIDEBAR_SELECTOR} details`;
 
   const prefersReducedMotion = window.matchMedia?.(
     "(prefers-reduced-motion: reduce)"
@@ -30,8 +32,22 @@ const props = Astro.props as Props;
     });
   };
 
+  const toggleSectionsForActivePage = () => {
+    const activeLink = document.querySelector(ACTIVE_SELECTOR);
+    if (!activeLink) return;
+
+    const sections = Array.from(
+      document.querySelectorAll<HTMLDetailsElement>(SECTION_SELECTOR)
+    );
+
+    sections.forEach((section) => {
+      section.open = section.contains(activeLink);
+    });
+  };
+
   const run = () => {
     // initial attempt
+    toggleSectionsForActivePage();
     scrollActiveLink("smooth");
 
     // if you want to be extra-safe with late-rendered content, you could
@@ -47,7 +63,17 @@ const props = Astro.props as Props;
 
   // Handle Astro/Starlight client-side navigation
   window.addEventListener("astro:after-swap", () => {
+    toggleSectionsForActivePage();
     // no animation on fast internal nav if you prefer:
     scrollActiveLink("auto");
   });
 </script>
+
+<style>
+  [data-ecency-sidebar] {
+    /* Account for the fixed header so the final sidebar items stay visible */
+    max-height: calc(100vh - var(--sl-nav-height));
+    overflow-y: auto;
+    padding-block-end: 1rem;
+  }
+</style>