Highlight current anchor link in sidebar and rename nav items

- Add data-current attribute to sidebar links matching current URL hash
- Show green accent border for current endpoint link
- Update on hashchange for smooth navigation
- Rename "Policy" to "Network Policy" and "HTTP Proxy" to "Proxy"

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Author: Kyle McLaren

src/components/Head.astro

@@ -189,6 +189,8 @@ const breadcrumbSchema = {
 <script>
   function initSidebarNavigation() {
     const currentPath = window.location.pathname;
+    const currentHash = window.location.hash;
+    const currentUrl = currentPath + currentHash;
 
     // Find all nested sidebar groups within API Reference
     const sidebarGroups = document.querySelectorAll('nav[aria-label="Main"] details details');
@@ -211,6 +213,20 @@ const breadcrumbSchema = {
         details.setAttribute('open', '');
       }
 
+      // Mark anchor links as current if they match the current URL hash
+      const allLinks = details.querySelectorAll(':scope > ul a[href]');
+      allLinks.forEach((link) => {
+        const linkHref = link.getAttribute('href') || '';
+        // Check if link matches current path+hash or just current path (for base page)
+        if (linkHref === currentUrl ||
+            (linkHref === currentPath) ||
+            (linkHref === currentPath + '/')) {
+          link.setAttribute('data-current', 'true');
+        } else {
+          link.removeAttribute('data-current');
+        }
+      });
+
       // Skip click handler setup if already initialized
       if (summary.dataset.navInit) return;
       summary.dataset.navInit = 'true';
@@ -242,4 +258,7 @@ const breadcrumbSchema = {
     initSidebarNavigation();
   }
   document.addEventListener('astro:page-load', initSidebarNavigation);
+
+  // Also update on hash change (when clicking anchor links)
+  window.addEventListener('hashchange', initSidebarNavigation);
 </script>

src/lib/sidebar.ts

@@ -200,7 +200,7 @@ export const sidebarConfig: SidebarGroup[] = [
         ],
       },
       {
-        label: 'Policy',
+        label: 'Network Policy',
         collapsed: true,
         items: [
           {
@@ -216,7 +216,7 @@ export const sidebarConfig: SidebarGroup[] = [
         ],
       },
       {
-        label: 'HTTP Proxy',
+        label: 'Proxy',
         collapsed: true,
         items: [
           {

src/styles/custom.css

@@ -780,11 +780,13 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 0 0.5rem 0.5rem 0;
 }
 
-[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) {
+[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]),
+[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[data-current="true"]) {
   border-inline-start: 2px solid oklch(0.5 0.2 285);
 }
 
-[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) > a {
+[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) > a,
+[data-theme='light'] nav[aria-label="Main"] ul ul li:has(> a[data-current="true"]) > a {
   margin-left: -1px;
 }
 
@@ -808,11 +810,13 @@ h1, h2, h3, h4, h5, h6 {
   border-radius: 0 0.5rem 0.5rem 0;
 }
 
-[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) {
+[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]),
+[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[data-current="true"]) {
   border-inline-start: 2px solid var(--sl-color-accent);
 }
 
-[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) > a {
+[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[aria-current="page"]) > a,
+[data-theme='dark'] nav[aria-label="Main"] ul ul li:has(> a[data-current="true"]) > a {
   margin-left: -1px;
 }