From 4b11a544df6e4d365ca79a5f1d2823803700806e Mon Sep 17 00:00:00 2001
From: Maciej Matuszewski <maciek.matuszewski@gmail.com>
Date: Sat, 13 Jan 2018 23:38:35 +0100
Subject: [PATCH] Fix scroll navigation

---
 package-lock.json               |  3 +++
 package.json                    |  1 +
 src/scripts/scroll.js           | 44 +++++++++++++++++++--------------
 src/styles/components/_nav.scss | 16 ++++++++----
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4f18f95..836d564 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 04dbce3..d7fa121 100644
--- a/package.json
+++ b/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"
diff --git a/src/scripts/scroll.js b/src/scripts/scroll.js
index 03197d3..c1d2ea8 100644
--- a/src/scripts/scroll.js
+++ b/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
   });
 }
diff --git a/src/styles/components/_nav.scss b/src/styles/components/_nav.scss
index 3a6ba42..b0fe951 100644
--- a/src/styles/components/_nav.scss
+++ b/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;