add highlight to current selected menu element (closes #156)

javalin · Nov 9, 2023 · 3aa613c · 3aa613c
1 parent ef7e647
commit 3aa613c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -28,7 +28,7 @@
             <a id="logo" href="/" aria-label="Javalin">
                 {% if page.splash %}<img src="/img/logo_inv.svg" alt="Javalin">{% else %}<img src="/img/logo.svg" alt="Javalin">{% endif %}
             </a>
-            <ul>
+            <ul class="top-nav">
                 <li><a href="/documentation">Docs</a></li>
                 <li><a href="/tutorials">Tutorials</a></li>
                 <li><a href="/plugins">Plugins</a></li>

diff --git a/_sass/_frame.scss b/_sass/_frame.scss
@@ -73,6 +73,11 @@ nav {
     li {
       margin: 0;
 
+        &.active {
+          color: #000;
+          text-decoration: underline;
+        }
+
       + li {
         border-left: 1px solid $light-border;
       }

diff --git a/js/_partials/main.js b/js/_partials/main.js
@@ -40,3 +40,13 @@ for (let i = 0; i < document.links.length; i++) {
         submenuLi.querySelector("ul").style.display = "none";
     });
 })();
+
+(() => {
+    let navLinks = document.querySelectorAll(".top-nav li a");
+    navLinks.forEach(link => {
+        const href = link.getAttribute("href")
+        if (window.location.pathname.startsWith(href)) {
+            link.parentElement.classList.add("active");
+        }
+    });
+})();
diff --git a/js/_partials/scrolling.js b/js/_partials/scrolling.js
@@ -10,20 +10,24 @@
             // Function to run after scrolling
         }
     });
-    gumshoe.init({ // https://github.com/cferdinandi/gumshoe (scrollspy)
-        selector: '#spy-nav ul a', // Default link selector
-        selectorHeader: fixedHeaderSelector, // Fixed header selector
-        container: window, // The element to spy on scrolling in (must be a valid DOM Node)
-        offset: 128, // Distance in pixels to offset calculations
-        activeClass: 'active', // Class to apply to active navigation link and its parent list item
-        scrollDelay: false, // Wait until scrolling has stopped before updating the navigation
-        callback: function (nav) {
-            try {
-                document.querySelector(".right-menu .active").scrollIntoView({block: "start"});
-                window.history.replaceState({}, "", location.pathname + "#" + nav.target.id);
-                document.dispatchEvent(new CustomEvent("menu-scroll-enter", {detail: nav}));
-            } catch (e) { /* Doesn't matter */
+    try {
+        gumshoe.init({ // https://github.com/cferdinandi/gumshoe (scrollspy)
+            selector: '#spy-nav ul a', // Default link selector
+            selectorHeader: fixedHeaderSelector, // Fixed header selector
+            container: window, // The element to spy on scrolling in (must be a valid DOM Node)
+            offset: 128, // Distance in pixels to offset calculations
+            activeClass: 'active', // Class to apply to active navigation link and its parent list item
+            scrollDelay: false, // Wait until scrolling has stopped before updating the navigation
+            callback: function (nav) {
+                try {
+                    document.querySelector(".right-menu .active").scrollIntoView({block: "start"});
+                    window.history.replaceState({}, "", location.pathname + "#" + nav.target.id);
+                    document.dispatchEvent(new CustomEvent("menu-scroll-enter", {detail: nav}));
+                } catch (e) { /* Doesn't matter */
+                }
             }
-        }
-    });
+        });
+    } catch (e) {
+        console.error("Failed to initialize gumshoe");
+    }
 })();