Close animation on mobile after clicking a link

src/scripts/nav.js

@@ -1,5 +1,6 @@
 const ACTIVE_CLASS = 'is-active';
 const ACTIVATED_CLASS = 'is-activated';
+let navInstance = '';
 
 class Nav {
   constructor() {
@@ -7,6 +8,16 @@ class Nav {
     this.$nav = document.querySelector('.js-nav');
   }
 
+  closeNav() {
+    const { $nav, $burger } = this;
+
+    if (!$nav.classList.contains(ACTIVE_CLASS)) return;
+
+    $nav.classList.toggle(ACTIVE_CLASS);
+    $burger.classList.toggle(ACTIVE_CLASS);
+    $nav.classList.toggle(ACTIVATED_CLASS);
+  }
+
   init() {
     this.addEvents();
   }
@@ -31,10 +42,21 @@ class Nav {
 
 }
 
+export function closeNav() {
+  if (navInstance) {
+    navInstance.closeNav();
+
+    return true;
+  }
+
+  return false;
+}
+
 export default function init() {
   const $menu = document.querySelector('.js-nav');
 
   if ($menu) {
-    new Nav().init();
+    navInstance = new Nav();
+    navInstance.init();
   }
 }

src/scripts/scroll.js

@@ -1,5 +1,6 @@
 import SmoothScroll from 'smooth-scroll';
 import gumshoe from 'gumshoe';
+import { closeNav } from './nav';
 
 const LINKS_SELECTOR = 'a[href^="#"]';
 const HEADER_SELECTOR = '.js-scroll-header';
@@ -7,8 +8,6 @@ const SCROLL_SPEED = 500;
 const ACTIVE_CLASS = 'active';
 
 function setActiveClassNames() {
-  gumshoe.destroy();
-
   const $links = document.querySelectorAll(LINKS_SELECTOR);
   const currentHash = location.hash;
 
@@ -47,7 +46,11 @@ export default function init() {
     header: HEADER_SELECTOR,
     speed: SCROLL_SPEED,
     easing: 'easeInOutQuad',
-    before: setActiveClassNames,
+    before: () => {
+      gumshoe.destroy();
+      closeNav();
+      setActiveClassNames();
+    },
     after: initGumshoe
   });
 }