Make navbar animate on hover

css/styles.css

@@ -39,17 +39,39 @@ hr {
 }
 
 #nav-page {
-  display: flex;
-  justify-content: center;
+  display: block;
+  text-align: center;
   margin: 1rem 0;
+  width: calc(4rem * 3);
   border-radius: 0.8rem;
   background: rgb(103,16,18);
   background: linear-gradient(45deg, rgba(103,16,18,1) 0%, rgba(105,11,12,1) 100%);
 }
 
+#nav-page-inner {
+  z-index: 2;
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+#nav-pointer {
+  z-index: 1;
+  position: absolute;
+  height: 1.8rem;
+  border-radius: 0.8rem;
+  transition: transform 0.25s ease-in-out;
+  will-change: transform;
+  width: 4rem;
+  background-color: rgb(191,31,34);
+}
+
 .nav-link {
-  height: 1.2rem;
-  padding: 0.4rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 1.8rem;
+  width: 4rem;
   border-radius: 0.8rem;
 }
 
@@ -58,10 +80,6 @@ hr {
   color: white;
 }
 
-.nav-link.active {
-  background-color: rgb(191,31,34);
-}
-
 #content {
   width: 100%;
 }

index.html

@@ -26,11 +26,14 @@ <h1>CRModders</h1>
           <img class="nav-img" src="images/trello.svg"/>
         </a>
       </nav>
-      <nav id="nav-page">
-        <div class="nav-link"><a href="#about">about</a></div>
-        <div class="nav-link"><a href="#repos">repos</a></div>
-        <div class="nav-link"><a href="#people">people</a></div>
-      </nav>
+      <div id="nav-page">
+        <div id="nav-pointer"></div>
+        <div id="nav-page-inner">
+          <div class="nav-link"><a href="#about">about</a></div>
+          <div class="nav-link"><a href="#repos">repos</a></div>
+          <div class="nav-link"><a href="#people">people</a></div>
+        </div>
+      </div>
       <div id="content"></div>
       <footer>This page is not affiliated with Cosmic Reach or FinalForEach.</footer>
     </div>

js/index.js

@@ -1,16 +1,40 @@
 function switchPage() {
+  const navPointer = document.getElementById("nav-pointer");
+  const navOuter = document.getElementById("nav-page");
+  const nav = document.getElementById("nav-page-inner");
   const hash = window.location.hash;
+
   if (hash) {
-    document.querySelector(".nav-link.active")?.classList.remove("active");
-    document.querySelector(`nav a[href="${hash}"]`)?.parentElement.classList.add("active");
+    let activeLink;
+
+    for (let i = 0; i < nav.children.length; i++) {
+      let child = nav.children.item(i);
+      let pos = i * 100 + "%";
+
+      child.addEventListener("mouseenter", () => {
+        navPointer.style.transform = `translateX(${pos})`;
+      });
+
+      if (hash === child.firstChild.getAttribute("href")) {
+        activeLink = child;
+        navPointer.style.transform = `translateX(${pos})`;
+      }
+    }
+
+    navOuter.addEventListener("mouseleave", () => {
+      if (activeLink) {
+        let pos = Array.from(nav.children).indexOf(activeLink) * 100 + "%";
+        navPointer.style.transform = `translateX(${pos})`;
+      }
+    });
 
     fetch(hash.substring(1) + ".html")
       .then(response => response.text())
       .then(text => {
         const elm = document.getElementById("content");
         elm.innerHTML = text;
         Array.from(elm.querySelectorAll("script"))
-          .forEach( oldScriptEl => {
+          .forEach(oldScriptEl => {
             const newScriptEl = document.createElement("script");
 
             Array.from(oldScriptEl.attributes).forEach( attr => {
@@ -30,4 +54,4 @@ function switchPage() {
 }
 
 window.addEventListener("hashchange", switchPage);
-window.addEventListener("load", switchPage);
+document.addEventListener("DOMContentLoaded", switchPage);