diff --git a/src/kedro_sphinx_theme/theme/kedro-sphinx-theme/layout.html b/src/kedro_sphinx_theme/theme/kedro-sphinx-theme/layout.html index e7f2d91..1bf69bf 100644 --- a/src/kedro_sphinx_theme/theme/kedro-sphinx-theme/layout.html +++ b/src/kedro_sphinx_theme/theme/kedro-sphinx-theme/layout.html @@ -13,7 +13,7 @@
- Kedro + Kedro Kedro-Viz Kedro-Datasets
@@ -32,6 +32,20 @@ //inline styling for read-the-docs flyout document.documentElement.style.setProperty('--readthedocs-flyout-font-size', '0.9em'); + function highlightActiveLink() { + var currentUrl = window.location.href; + const links = document.querySelectorAll(".wy-main-nav .wy-main-nav-link"); + + // Iterate over each link and check if its href is part of the current URL + links.forEach(link => { + if (currentUrl.includes(link.href)) { + link.classList.add("active"); + } else { + link.classList.remove("active"); // Remove the active class if it's not active + } + }); + } + document.addEventListener("DOMContentLoaded", function() { function showReadTheDocsSearch() { @@ -66,20 +80,12 @@ openBtn.classList.add('wy-nav-top-open'); document.querySelector('.wy-nav-top').prepend(openBtn); - // Select all navigation links within the .wy-main-nav container - var navLinks = document.querySelectorAll('.wy-main-nav .wy-main-nav-link'); - var currentPath = window.location.pathname; - - // Iterate over each link to check if the current path includes the link's unique ID - navLinks.forEach(function(link) { - if (currentPath.includes("/projects/kedro-viz/en/") && link.id === 'kedro-viz') { - link.classList.add('active'); - } else if (currentPath.includes("/projects/kedro-datasets/en/") && link.id === 'kedro-datasets') { - link.classList.add('active'); - } else if (link.id === 'kedro') { - // Default to Kedro if no other match - link.classList.add('active'); - } + highlightActiveLink(); + + // Optionally, listen for URL changes (e.g., when using history.pushState) + window.addEventListener('popstate', function(event) { + highlightActiveLink(); }); + }); {% endblock %}