This JavaScript code improves the mobile menu by enabling it to close automatically when users click outside the menu area or scroll, providing a more user-friendly navigation experience.

close_hamburger_menu.js

document.addEventListener("DOMContentLoaded", function () {
  const mobileMenu = document.querySelector(".jet-mobile-menu");

  if (mobileMenu) {
    const menuUniqId = JSON.parse( mobileMenu.dataset.menuOptions ).menuUniqId
    const toggleButton = mobileMenu.querySelector(".jet-mobile-menu__toggle");
    let menuOpen = false;

    function toggleMenu() {
      menuOpen = !menuOpen;
      const action = menuOpen ? 'openMenu' : 'closeMenu';
      window.jetMenu.eventBus.$emit(action, { "menuUniqId": menuUniqId });
    }

    toggleButton.addEventListener("click", function (event) {
		toggleMenu();
		event.stopPropagation();
    });

    function closeMenuOnClickOutside(event) {
      if (menuOpen && !event.target.closest(".jet-mobile-menu")) {
        toggleMenu();
      }
    }

    function closeMenuOnScroll() {
      if (menuOpen) {
        toggleMenu();
      }
    }

    window.addEventListener("scroll", closeMenuOnScroll);
    document.addEventListener("click", closeMenuOnClickOutside);
  }
});