menu.js

'use strict';

/* Header Menu Button
/* ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## */

const headerMenuButton = document.getElementsByClassName('drop-menu__link')[0];
const dropdownMenu = document.getElementsByClassName('ul-drop')[0];

headerMenuButton.onclick = () => {
  headerMenuButton.classList.toggle('drop-menu__link--active');
  dropdownMenu.classList.toggle('ul-drop--active');
}


/* Close Drop Down Menu
/* ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## ## */

const closeDropDownMenuOnClickOutside = (e) => {
  const target = e.target;
  const menu = target.closest('menu');
  if (!menu) {
    headerMenuButton.classList.remove('drop-menu__link--active');
    dropdownMenu.classList.remove('ul-drop--active');
  }
}

document.body.addEventListener('click', closeDropDownMenuOnClickOutside);