Fix scroll navigation

package-lock.json

@@ -8146,6 +8146,9 @@
         "glogg": "1.0.0"
       }
     },
+    "gumshoe": {
+      "version": "github:cferdinandi/gumshoe#28cf9b73c7e2dbaac2c18c1a0d7661753a0a7878"
+    },
     "gzip-size": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-3.0.0.tgz",

package.json

@@ -63,6 +63,7 @@
     "vinyl-source-stream": "^1.1.0"
   },
   "dependencies": {
+    "gumshoe": "github:cferdinandi/gumshoe",
     "sanitize.css": "^4.1.0",
     "smooth-scroll": "^12.1.5",
     "vanilla-tilt": "^1.4.1"

src/scripts/scroll.js

@@ -1,11 +1,14 @@
 import SmoothScroll from 'smooth-scroll';
+import gumshoe from 'gumshoe';
 
 const LINKS_SELECTOR = 'a[href^="#"]';
-const SECTION_SELECTOR = '.section';
 const HEADER_SELECTOR = '.js-scroll-header';
+const SCROLL_SPEED = 500;
 const ACTIVE_CLASS = 'active';
 
 function setActiveClassNames() {
+  gumshoe.destroy();
+
   const $links = document.querySelectorAll(LINKS_SELECTOR);
   const currentHash = location.hash;
 
@@ -18,30 +21,33 @@ function setActiveClassNames() {
   });
 }
 
-// function listenForActiveSection() {
-//   const $sections = document.querySelectorAll(SECTION_SELECTOR);
-//   const $header = document.querySelector(HEADER_SELECTOR);
+function initGumshoe() {
+  gumshoe.init({
+    selector: LINKS_SELECTOR,
+    selectorHeader: HEADER_SELECTOR,
+    activeClass: ACTIVE_CLASS,
+    callback: () => {
+      const activeLink = document.querySelector(`a.${ACTIVE_CLASS}`);
 
-//   document.addEventListener('scroll', () => {
-//     const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
-//     const $sectionsArray = [...$sections];
-//     const $activeSections = $sectionsArray.filter(($section) => {
-//       return $section.offsetTop <= scrollPosition + $header.offsetHeight;
-//     });
-
-//     const $activeSection = $activeSections[$activeSections.length - 1];
-
-//     history.pushState(undefined, undefined, `#${$activeSection.id}`);
-//   });
-// }
+      if (activeLink && location.hash !== activeLink.hash) {
+        if (history.pushState) {
+          history.pushState(null, null, activeLink.hash);
+        } else {
+          location.hash = activeLink.hash;
+        }
+      }
+    }
+  });
+}
 
 export default function init() {
-  // listenForActiveSection();
+  initGumshoe();
 
   return new SmoothScroll(LINKS_SELECTOR, {
     header: HEADER_SELECTOR,
-    speed: 500,
+    speed: SCROLL_SPEED,
     easing: 'easeInOutQuad',
-    before: setActiveClassNames
+    before: setActiveClassNames,
+    after: initGumshoe
   });
 }

src/styles/components/_nav.scss

@@ -68,7 +68,7 @@
     z-index: -1;
     content: attr(data-title);
     transform: translate(-50%, -50%);
-    transition: transform .7s cubic-bezier(0, 1.54, .4, 1.7);
+    transition: transform .7s ease-out;
   }
 
   &__link::before {
@@ -79,20 +79,26 @@
     color: $color-blue;
   }
 
-  &__link:hover::before,
-  &__link.active::before {
+  &__link:hover::before {
     $transform-val: calc(-50% - #{$anim-size});
 
     transform: translate($transform-val, $transform-val);
   }
 
-  &__link:hover::after,
-  &__link.active::after {
+  &__link:hover::after {
     $transform-val: calc(-50% + #{$anim-size});
 
     transform: translate($transform-val, $transform-val);
   }
 
+  &__link.active::before {
+    transform: translate(-50%, -50% + #{$anim-size});
+  }
+
+  &__link.active::after {
+    transform: translate(-50%, -50% + #{$anim-size * 2});
+  }
+
   &__item--sub-nav {
     flex-direction: column;
     cursor: pointer;