Add active links

src/hbs/index.hbs

@@ -29,7 +29,9 @@ introduction:
     - 'We are facing exciting times in the history of humanity, and this project will pay tribute to the greatness of this technology, while proposing a holistic approach to knowledge; where music, art, education, economics, mathematics and philosophy take place under the same roof.'
   button:
     label: 'Signup for newsletter'
-  nextSectionLink: 'Learn more about the project ↓'
+  nextSectionLink:
+    text: 'Learn more about the project ↓'
+    link: '#project'
   counterText: '02 - 06'
 
 project:
@@ -50,7 +52,9 @@ project:
     icon: 'images/file.svg'
 
   counterText: '03 - 06'
-  nextSectionLink: 'Learn more about the structure ↓'
+  nextSectionLink:
+    text: 'Learn more about the structure ↓'
+    link: '#structure'
 
 structure:
   id: 'structure'
@@ -64,7 +68,9 @@ structure:
       - 'The Mobius strip leads to the construction of a very interesting solid called the Klein Bottle. Imagine connecting the sides of a paper ring to come up with a donut shape. Similarly, imagine connecting the sides of a Mobius strip, you would end up with a Klein bottle.'
     lower:
       - 'The Klein bottle shares the same characteristics as the Mobius strip of having a unified surface. In addition, the Klein bottle provides an enclosed environment perfect for the development of a public programming schedule to take place inside of it. Hence, The public art structure will be a penetrable Klein bottle that symbolizes the bridge between the Dogecoin and Ethereum blockchains, connecting the outer side with the inner surface through the bottleneck pass way.'
-  nextSectionLink: 'Learn more about the team ↓'
+  nextSectionLink:
+    text: 'Learn more about the team ↓'
+    link: '#team'
   counterText: '04 - 06'
 
 team:
@@ -95,7 +101,9 @@ team:
       name: 'Aqeel Mohammad'
       image: ''
 
-  nextSectionLink: 'Learn more about getting involved ↓'
+  nextSectionLink:
+    text: 'Learn more about getting involved ↓'
+    link: '#get-involved'
   counter: '05 - 06'
 
 getInvolved:
@@ -123,7 +131,9 @@ getInvolved:
       - 'Art DAO'
       - 'Network Topology'
       - 'Art and culture in the blockchain space'
-  nextSectionLink: 'Learn more about our process →'
+  nextSectionLink:
+    text: 'Learn more about our process →'
+    link: '#'
   counterText: '06 - 06'
 
 ---

src/hbs/partials/components/get-involved.hbs

@@ -43,7 +43,7 @@
 
     {{> components/next-section-link
       class="get-involved__link"
-      name=getInvolved.nextSectionLink
+      nextSection=getInvolved.nextSectionLink
     }}
 
   </div>

src/hbs/partials/components/header.hbs

@@ -1,11 +1,11 @@
-<header class="header">
+<header class="header js-scroll-header">
   <div class="header__container">
     <a class="header-logo" href="{{data.rootUrl}}" title="artproject">
       {{svg 'images/logo.svg'}}
       <span class="header-logo__subtitle">ART PROJECT</span>
     </a>
 
-    {{> components/nav parentRouteName=parentRouteName}}
+    {{> components/nav}}
 
     {{> components/burger-button class="header__btn"}}
   </div>

src/hbs/partials/components/introduction.hbs

@@ -37,7 +37,7 @@
 
       {{> components/next-section-link
         class="introduction__link"
-        name=introduction.nextSectionLink
+        nextSection=introduction.nextSectionLink
       }}
 
     </div>

src/hbs/partials/components/next-section-link.hbs

@@ -1,3 +1,3 @@
-<a href="{{ href }}" class="next-section-link {{class}}">
-  {{ name }}
+<a href="{{ nextSection.link }}" class="next-section-link {{class}}">
+  {{ nextSection.text }}
 </a>

src/hbs/partials/components/project.hbs

@@ -36,7 +36,7 @@
 
     {{> components/next-section-link
       class="project__link"
-      name=project.nextSectionLink
+      nextSection=project.nextSectionLink
     }}
 
   </div>

src/hbs/partials/components/structure.hbs

@@ -36,7 +36,7 @@
 
       {{> components/next-section-link
         class="structure__link"
-        name=structure.nextSectionLink
+        nextSection=structure.nextSectionLink
       }}
     </div>
   </div>

src/hbs/partials/components/team.hbs

@@ -30,7 +30,7 @@
 
     {{> components/next-section-link
       class="team__link"
-      name=team.nextSectionLink
+      nextSection=team.nextSectionLink
     }}
 
   </div>

src/scripts/scroll.js

@@ -1,9 +1,47 @@
 import SmoothScroll from 'smooth-scroll';
 
-export default function init() {
-  return new SmoothScroll('a[href^="#"]', {
-    speed: 700,
-    offset: 95,
-    easing: 'easeOut'
+const LINKS_SELECTOR = 'a[href^="#"]';
+const SECTION_SELECTOR = '.section';
+const HEADER_SELECTOR = '.js-scroll-header';
+const ACTIVE_CLASS = 'active';
+
+function setActiveClassNames() {
+  const $links = document.querySelectorAll(LINKS_SELECTOR);
+  const currentHash = location.hash;
+
+  $links.forEach(($link) => {
+    if ($link.hash === currentHash) {
+      $link.classList.add(ACTIVE_CLASS);
+    } else {
+      $link.classList.remove(ACTIVE_CLASS);
+    }
+  });
+}
+
+function listenForActiveSection() {
+  const $sections = document.querySelectorAll(SECTION_SELECTOR);
+  const $header = document.querySelector(HEADER_SELECTOR);
+
+  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}`);
+  });
+}
+
+export default function init() {
+  listenForActiveSection();
+
+  return new SmoothScroll(LINKS_SELECTOR, {
+    header: HEADER_SELECTOR,
+    speed: 500,
+    easing: 'easeInOutQuad',
+    before: setActiveClassNames
   });
 }

src/styles/base/_settings.scss

@@ -42,5 +42,5 @@ $title-font-family: 'Rubik Mono One', sans-serif;
 //=======================
 
 $duration: .2s;
-$header-height--mobile: 95px;
+$header-height--mobile: 80px;
 $header-height--desktop: 95px;

src/styles/components/_nav.scss

@@ -79,13 +79,15 @@
     color: $color-blue;
   }
 
-  &__link:hover::before {
+  &__link:hover::before,
+  &__link.active::before {
     $transform-val: calc(-50% - #{$anim-size});
 
     transform: translate($transform-val, $transform-val);
   }
 
-  &__link:hover::after {
+  &__link:hover::after,
+  &__link.active::after {
     $transform-val: calc(-50% + #{$anim-size});
 
     transform: translate($transform-val, $transform-val);

src/styles/components/_structure.scss

@@ -1,7 +1,7 @@
 .structure {
   display: flex;
   align-items: center;
-  margin-top: 10px;
+  padding-top: 10px;
   color: $color-scarlet;
   background-color: $color-white;
 
@@ -88,6 +88,6 @@
   }
 
   @media #{$screen-sm} {
-    margin-top: 30px;
+    padding-top: 30px;
   }
 }