homegrade_theme_production/resources/js/header.js

export default function menuInit() {
  const header = document.querySelector('#main-header');

  // Search module
  const searchModule = header.querySelector('.search-module');
  const searchModuleToggle = header.querySelector('#search-module-toggle');

  // Mobile Menu
  const mobileMenuToggle = header.querySelector('#mobile-menu-toggle');

  /* -----------------------------------------------------------
	HANDLE SUBMENUS
 -----------------------------------------------------------*/
  // SubmenusToggles
  const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
  const submenuCloseBtns = header.querySelectorAll('.menu-item__submenu-close');

  function isSubmenuOpen() {
    return header.querySelector('sub-menu-open') !== null;
  }

  function openSubmenu(buttonToggle) {
    let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
    buttonToggle.setAttribute('aria-expanded', !isExpanded);
    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--open');
    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed');
  }
  function closeSubmenus() {
    const openSubmenus = header.querySelectorAll('.sub-menu--open');
    openSubmenus.forEach((submenu) => {
      submenu.classList.remove('sub-menu--open');
      submenu.classList.add('sub-menu--closed');
      submenu.parentElement
        .querySelector('.menu-item__submenu-toggle')
        .setAttribute('aria-expanded', 'false');
    });
  }

  function handleSubmenuToggle(buttonToggle) {
    let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
    if (!isExpanded) {
      closeSubmenus();
      openSubmenu(buttonToggle);
    } else {
      closeSubmenus();
    }
  }

  function closeCurrentSubmenu(buttonClose) {
    console.log('close submenu');
    console.log(buttonClose.parentElement);
    const currentOpenedSubmenu = buttonClose.parentElement;

    currentOpenedSubmenu.classList.remove('sub-menu--open');
    currentOpenedSubmenu.classList.add('sub-menu--closed');
    currentOpenedSubmenu.parentElement
      .querySelector('.menu-item__submenu-toggle')
      .setAttribute('aria-expanded', 'false');
  }
  // SUBMENU TOGGGLES open/close
  submenuToggles.forEach((button) => {
    button.addEventListener('click', () => {
      if (isSearchOpen() === true) {
        closeSearch();
      }
      handleSubmenuToggle(button);
      // closeSearch();
    });
  });

  submenuCloseBtns.forEach((button) => {
    button.addEventListener('click', () => closeCurrentSubmenu(button));
  });

  /* -----------------------------------------------------------
	HANDLE SEARCH
 -----------------------------------------------------------*/
  function isSearchOpen() {
    // IF CLOSED
    if (
      searchModule.getAttribute('mobile-closed') != null &&
      searchModule.getAttribute('aria-hidden') != null &&
      searchModule.getAttribute('mobile-opened') === null
    ) {
      return false;
    }

    // IF OPENED
    if (
      searchModule.getAttribute('mobile-opened') != null &&
      searchModule.getAttribute('mobile-closed') === null &&
      searchModule.getAttribute('aria-hidden') === null
    ) {
      return true;
    }
    // IF TRANSITIONNING OR PROBLEM
    return null;
  }
  function openSearch() {
    searchModuleToggle.setAttribute('aria-expanded', '');
    searchModule.setAttribute('mobile-opened', '');
    searchModule.removeAttribute('mobile-closed');
    setTimeout(() => {
      searchModule.removeAttribute('aria-hidden');
    }, 400);
  }
  function closeSearch() {
    searchModule.setAttribute('aria-hidden', '');
    searchModule.removeAttribute('mobile-opened', '');

    searchModule.setAttribute('mobile-closing', '');

    searchModule.addEventListener(
      'animationend',
      () => {
        searchModule.setAttribute('mobile-closed', '');
        searchModule.removeAttribute('mobile-closing', '');
      },
      { once: true }
    );
    // setTimeout(() => {
    //   searchModule.setAttribute('mobile-closed', '');
    //   searchModule.removeAttribute('mobile-opened', '');
    // }, 50);

    searchModuleToggle.toggleAttribute('aria-expanded');
  }

  // SEARCH TOGGLE open/close
  searchModuleToggle.addEventListener('click', function (e) {
    closeSubmenus();

    // SEARCH IS CLOSED --> OPEN IT
    if (isSearchOpen() === false) {
      openSearch();
      return;
    }

    // SEARCH IS OPEN --> CLOSE IT
    if (isSearchOpen() === true) {
      closeSearch();
    }
  });

  /* -----------------------------------------------------------
	HANDLE MOBILE
 -----------------------------------------------------------*/
  const renovateurNavListContainer = header.querySelector('.menu-renovateur__navlist-container');
  const HomegradeNavListContainer = header.querySelector('.menu-homegrade');

  function openMenu(menuContainer) {
    // header.removeAttribute('closed', '');
    // header.setAttribute('opened', '');
    // header.removeAttribute('aria-hidden', '');
    // header.setAttribute('opening', '');

    // RENOVATEUR
    menuContainer.removeAttribute('closed', '');
    menuContainer.setAttribute('opened', '');
    menuContainer.removeAttribute('aria-hidden', '');
    menuContainer.setAttribute('opening', '');

    menuContainer.addEventListener(
      'animationend',
      () => {
        menuContainer.removeAttribute('opening', '');
      },
      { once: true }
    );
  }
  function closeMenu(menuContainer) {
    // header.removeAttribute('opened');
    // header.setAttribute('aria-hidden', '');
    // header.setAttribute('closing', '');

    menuContainer.removeAttribute('opened');
    menuContainer.setAttribute('aria-hidden', '');
    menuContainer.setAttribute('closing', '');

    menuContainer.addEventListener(
      'animationend',
      () => {
        menuContainer.setAttribute('closed', '');
        menuContainer.removeAttribute('closing', '');
      },
      { once: true }
    );
  }
  mobileMenuToggle.addEventListener('click', function (e) {
    const isNavOpened = renovateurNavListContainer.hasAttribute('opened');

    // Button Text Content
    const textContent = mobileMenuToggle.querySelector('span.text-content');
    const dataTextOpen = mobileMenuToggle.getAttribute('data-text-open');
    const dataTextClose = mobileMenuToggle.getAttribute('data-text-close');

    // Change Text button
    textContent.textContent = isNavOpened ? dataTextOpen : dataTextClose;

    // Toggle Aria-expanded
    mobileMenuToggle.toggleAttribute('aria-expanded');

    // Handle Visibility
    if (isNavOpened) {
      closeMenu(renovateurNavListContainer);
      closeMenu(HomegradeNavListContainer);
    }
    if (!isNavOpened) {
      openMenu(renovateurNavListContainer);
      openMenu(HomegradeNavListContainer);
    }
  });
}