https://ircuervo.com/javascripts/nuevomenu.js

1const overlay = document.querySelector(".overlay");
2const body = document.querySelector("body");
3const menuBtn = document.querySelector(".menu-btn");
4const menuItems = document.querySelector(".menu-items");
5const expandBtn = document.querySelectorAll(".expand-btn");
6
7function toggle() {
8  // disable overflow body
9  body.classList.toggle("overflow");
10  // dark background
11  overlay.classList.toggle("overlay--active");
12  // add open class
13  menuBtn.classList.toggle("open");
14  menuItems.classList.toggle("open");
15}
16
17menuBtn.addEventListener("click", (e) => {
18  e.stopPropagation();
19  toggle();
20});
21
22window.onkeydown = function (event) {
23  const key = event.key; // const {key} = event; in ES6+
24  const active = menuItems.classList.contains("open");
25  if (key === "Escape" && active) {
26    toggle();
27  }
28};
29
30document.addEventListener("click", (e) => {
31  let target = e.target,
32    its_menu = target === menuItems || menuItems.contains(target),
33    its_hamburger = target === menuBtn,
34    menu_is_active = menuItems.classList.contains("open");
35  if (!its_menu && !its_hamburger && menu_is_active) {
36    toggle();
37  }
38});
39
40// mobile menu expand
41expandBtn.forEach((btn) => {
42  btn.addEventListener("click", () => {
43    btn.classList.toggle("open");
44  });
45});