updated (#22)

Co-authored-by: dutchie032 <dutchie032>

_docs/js/site.js

@@ -19,4 +19,69 @@ document.addEventListener('DOMContentLoaded', function() {
     // Initialize
     const saved = localStorage.getItem('theme') || 'dark';
     setTheme(saved);
-});
+
+    // Set side-nav-title to the first h1's text
+    var h1 = document.querySelector('.content-wrapper h1');
+    var sideNavTitle = document.querySelector('.side-nav-title');
+    if (h1 && sideNavTitle) {
+        sideNavTitle.textContent = h1.textContent;
+    }
+});
+
+// Highlight sidenav link on scroll (shared for all pages)
+function setupSideNavHighlight() {
+    const navLinks = document.querySelectorAll('.side-nav a');
+    if (!navLinks.length) return;
+    const sections = Array.from(navLinks).map(link => {
+        const id = link.getAttribute('href').replace('#', '');
+        return document.getElementById(id);
+    });
+    function getHeaderOffset() {
+        const header = document.querySelector('header');
+        return header ? header.offsetHeight : 0;
+    }
+    function onScroll() {
+        const headerOffset = getHeaderOffset();
+        let activeIdx = 0;
+        const scrollPos = window.scrollY + headerOffset + 1;
+        // Highlight the first section if at the very top
+        if (window.scrollY === 0) {
+            activeIdx = 0;
+        } else {
+            for (let i = 0; i < sections.length; i++) {
+                const section = sections[i];
+                const nextSection = sections[i + 1];
+                if (section) {
+                    const sectionTop = section.offsetTop;
+                    const nextSectionTop = nextSection ? nextSection.offsetTop : Infinity;
+                    if (scrollPos >= sectionTop && scrollPos < nextSectionTop) {
+                        activeIdx = i;
+                        break;
+                    }
+                }
+            }
+            // Only trigger 'at bottom' logic if truly at the bottom and not at the very top
+            const atBottom = Math.abs((window.innerHeight + window.scrollY) - document.body.offsetHeight) < 2;
+            if (atBottom && window.scrollY !== 0) {
+                activeIdx = sections.length - 1;
+            }
+        }
+        navLinks.forEach((link, i) => {
+            if (i === activeIdx) {
+                link.classList.add('active');
+            } else {
+                link.classList.remove('active');
+            }
+        });
+    }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+    onScroll(); // Initial call
+}
+
+// Run on DOMContentLoaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupSideNavHighlight);
+} else {
+    setupSideNavHighlight();
+}