fix: header active state

raexera · Sep 8, 2024 · a7dd83a · a7dd83a
1 parent f3df8ed
commit a7dd83a
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/src/scripts/main.ts b/src/scripts/main.ts
@@ -55,11 +55,24 @@ window.evaluateHeaderPosition = () => {
 
 window.applyMenuItemClasses = () => {
   const menuItems = document.querySelectorAll<HTMLAnchorElement>("nav a");
-  const currentPath = window.location.pathname;
+  let currentPath = window.location.pathname;
+
+  if (currentPath === "/") {
+    currentPath = "/";
+  } else {
+    currentPath = currentPath.replace(/\/$/, "");
+  }
+
   const activeClass = ["text-white", "font-bold"];
 
   menuItems.forEach((menuItem) => {
-    if (new URL(menuItem.href).pathname === currentPath) {
+    let menuItemPath = new URL(menuItem.href).pathname;
+
+    if (menuItemPath !== "/") {
+      menuItemPath = menuItemPath.replace(/\/$/, "");
+    }
+
+    if (menuItemPath === currentPath) {
       menuItem.classList.add(...activeClass);
     } else {
       menuItem.classList.remove(...activeClass);