mega-menu.js

/**
 * Main Nav Script
 * ------------------------------------------------------------------------------
 * This is (hopefully) controlling the mobile menu open / close...
 * @namespace main-nav
 */

const burger = document.querySelector('.main-nav__utility-menu--open');
const nav = document.querySelector('.main-nav__menu');
const subNavClose = document.querySelector('.main-nav__utility-menu--close');
const cartIcon = document.querySelector('.main-nav__cart-icon');
const hasSubMenu = document.querySelector('.has-subnav a');
const overlayTarget = document.querySelector('.has-subnav');
const subNav = document.querySelector('.main-nav__sub-nav');
const mainContent = document.getElementById('MainContent');

// when they tap the burger, hide and show the things
burger.addEventListener('click', () => {
  nav.style.display = 'flex';
  subNavClose.style.display = 'block';
  burger.style.display = 'none';
  cartIcon.style.display = 'none';
  if (mainContent.classList.contains('overlay')) {
    mainContent.classList.remove('overlay');
  } else {
    mainContent.classList.add('overlay');
  }
});

// when they tap close icon, hide and show these selectors
subNavClose.addEventListener('click', () => {
  nav.style.display = 'none';
  subNavClose.style.display = 'none';
  burger.style.display = 'block';
  cartIcon.style.display = 'block';
  if (mainContent.classList.contains('overlay')) {
    mainContent.classList.remove('overlay');
  }
});

// adding and removing active classes to show/hide the sub nav menu (mainly for mobile)
hasSubMenu.addEventListener('click', () => {
  if (subNav.classList.contains('active')) {
    subNav.classList.remove('active');
  } else {
    subNav.classList.add('active');
  }
});

// if we hover on the subNav menu, we add the overlay per the design
overlayTarget.addEventListener('mouseover', () => {
  if (!mainContent.classList.contains('overlay')) {
    mainContent.classList.add('overlay');
  }
});

// if we hover off the subNav menu, we should remove the overlay too
overlayTarget.addEventListener('mouseout', () => {
  if (mainContent.classList.contains('overlay')) {
    mainContent.classList.remove('overlay');
  }
});