Add Active Navigation Class Based on URL

Signed-off-by: Huong Nguyen <huongg1409@gmail>

src/kedro_sphinx_theme/theme/kedro-sphinx-theme/layout.html

@@ -66,25 +66,19 @@
       openBtn.classList.add('wy-nav-top-open');
       document.querySelector('.wy-nav-top').prepend(openBtn);
 
+    // Get the current URL
+    const currentUrl = window.location.href;
+
     // Select all navigation links within the .wy-main-nav container
     var navLinks = document.querySelectorAll('.wy-main-nav .wy-main-nav-link');
 
-    // Function to remove 'active' class from all links
-    function removeActiveClass() {
-      navLinks.forEach(function(link) {
-          link.classList.remove('active');
-      });
-    }
-
-    // Add click event listener to each link
+    // Iterate over each link
     navLinks.forEach(function(link) {
-      link.addEventListener('click', function(event) {
-        // Remove 'active' class from all links
-        removeActiveClass();
-
-        // Add 'active' class to the clicked link
-        event.target.classList.add('active');
-      });
+      // Check if the link's href matches the current URL
+      if (link.href === currentUrl) {
+        // Add the 'active' class to the matching link
+        link.classList.add('active');
+      }
     });
   });
 </script>