Add Menu and Navigation

js/index.js

@@ -0,0 +1,12 @@
+import Menu from './menu';
+import Nav from './nav';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const menu = new Menu({
+    el: document.querySelector('.Menu'),
+  });
+  new Nav({
+    el: document.querySelector('.Nav'),
+    menu,
+  });
+});

js/menu.js

@@ -0,0 +1,47 @@
+const CLS = {
+  visible: 'Menu--visible',
+  minimized: 'Menu--minimized',
+};
+
+export default class Menu {
+  constructor(cfg) {
+    this.el = cfg.el;
+    this.state = 'visible';
+
+    this.attachEvents();
+    setTimeout(() => {
+      this.showMenu();
+    }, 1000);
+  }
+
+  attachEvents() {
+    let lastKnownPosition = 0;
+    window.addEventListener('scroll', () => {
+      if (this.state !== 'hidden') {
+        if (this.state !== 'visible' && window.scrollY < lastKnownPosition) {
+          this.showMenu();
+        } else if (this.state !== 'minimized' && window.scrollY >
+          lastKnownPosition) {
+          this.minimizeMenu();
+        }
+        lastKnownPosition = window.scrollY;
+      }
+    });
+  }
+
+  showMenu() {
+    this.state = 'visible';
+    this.el.classList.add(CLS.visible);
+    this.el.classList.remove(CLS.minimized);
+  }
+
+  minimizeMenu() {
+    this.state = 'minimized';
+    this.el.classList.add(CLS.minimized);
+  }
+
+  hideMenu() {
+    this.state = 'hidden';
+    this.el.classList.remove(CLS.visible);
+  }
+}

js/nav.js

@@ -0,0 +1,31 @@
+const CLS = {
+  open: 'Nav--open',
+};
+
+export default class Nav {
+  constructor(cfg) {
+    this.el = cfg.el;
+    this.menu = cfg.menu;
+
+    this.attachEvents();
+  }
+
+  attachEvents() {
+    this.menu.el.addEventListener('click', () => {
+      this.menu.hideMenu();
+      this.openNav();
+    });
+    this.el.querySelector('.Nav-close').addEventListener('click', () => {
+      this.menu.showMenu();
+      this.closeNav();
+    });
+  }
+
+  openNav() {
+    this.el.classList.add(CLS.open);
+  }
+
+  closeNav() {
+    this.el.classList.remove(CLS.open);
+  }
+}