add custom js to remove/add active class

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

docs/source/_static/custom.js

@@ -0,0 +1,25 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 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
+    navLinks.forEach(function(link) {
+        link.addEventListener('click', function(event) {
+            // Prevent the default link action
+            event.preventDefault();
+
+            // Remove 'active' class from all links
+            removeActiveClass();
+
+            // Add 'active' class to the clicked link
+            event.target.classList.add('active');
+        });
+    });
+});

docs/source/conf.py

@@ -21,6 +21,10 @@
     "sphinx_copybutton",
 ]
 
+html_js_files = [
+    "js/custom.js",
+]
+
 templates_path = ["_templates"]
 
 exclude_patterns = [

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

@@ -13,9 +13,9 @@
   </div>
 
   <div class="wy-main-nav">
-    <a href="/" class="active">Kedro</a>
-    <a href="https://docs.kedro.org/projects/kedro-viz/en/stable/">Kedro-Viz</a>
-    <a href="https://docs.kedro.org/projects/kedro-datasets">Kedro-Datasets</a>
+    <a class="wy-main-nav-link" href="/" class="active">Kedro</a>
+    <a class="wy-main-nav-link" href="https://docs.kedro.org/projects/kedro-viz/en/stable/">Kedro-Viz</a>
+    <a class="wy-main-nav-link" href="https://docs.kedro.org/projects/kedro-datasets">Kedro-Datasets</a>
   </div>
 
   {%- include "searchbox.html" %}