Navbar highlight active link

ai-safety-saclay · Dec 14, 2024 · 5be2848 · 5be2848
1 parent f2d5369
commit 5be2848
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/components/navbar.html b/components/navbar.html
@@ -15,9 +15,9 @@
                         Exposés
                     </a>
                     <ul class="dropdown-menu">
-                        <li><a class="dropdown-item" href="/groupe-de-lecture.html">Groupe de lecture</a></li>
+                        <li><a class="nav-link dropdown-item" href="/groupe-de-lecture.html">Groupe de lecture</a></li>
                         <li><hr class="dropdown-divider"></li>
-                        <li><a class="dropdown-item" href="/jeudia.html">Jeud'IA</a></li>
+                        <li><a class="nav-link dropdown-item" href="/jeudia.html">Jeud'IA</a></li>
                     </ul>
                 </li>
                 <li class="nav-item"><a class="nav-link" href="/hackathons.html">Hackathons</a></li>
@@ -26,4 +26,13 @@
                 <li class="nav-item"><a class="nav-link" href="/contact.html">Contact</a></li>
             </ul>
         </div>
-    </nav>
+    </nav>
+
+    <script>
+        const links = document.querySelectorAll(".nav-link");
+        links.forEach((link) => {
+            if (link.href === window.location.href) {
+                link.classList.add("active");
+            }
+        })        
+    </script>
diff --git a/scss/style.scss b/scss/style.scss
@@ -318,6 +318,10 @@ header {
             @extend .mx-2;
         }
 
+        .dropdown-item {
+            @extend .text-secondary;
+        }
+
         // FIXME: dropdown pushes navbar items to the bottom
         // when navbar is in vertical mode
     }