fix mobile to desktop nav bug

stephanlamoureux · Dec 7, 2023 · 16dbb6a · 16dbb6a
1 parent 63eca5a
commit 16dbb6a
Showing 1 changed file with 16 additions and 0 deletions.
diff --git a/components/mobileNav.js b/components/mobileNav.js
@@ -60,6 +60,7 @@ class mobileNav extends HTMLElement {
 `
 
 		this.updateNavWrapperClass()
+		this.setActiveLink()
 	}
 
 	updateNavWrapperClass() {
@@ -71,6 +72,21 @@ class mobileNav extends HTMLElement {
 			navWrapper.classList.add('about-nav-wrapper')
 		}
 	}
+
+	setActiveLink() {
+		const currentPath = window.location.pathname
+		const links = this.querySelectorAll('.link')
+
+		links.forEach(link => {
+			const href = link.getAttribute('href')
+			// Check if the href matches either the root path or index.html
+			if (href === currentPath || (currentPath === '/' && href === '/')) {
+				link.classList.add('is-active')
+			} else {
+				link.classList.remove('is-active')
+			}
+		})
+	}
 }
 
 customElements.define('mobile-nav', mobileNav)