export function setMenuToggle() {
    const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
    const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
    const menuTitle = document.querySelector('#menu-title');
    const menuBurger = document.querySelector('#hamburger');
    const menuH2 = document.querySelector('#menu > h2');
    menuButton.addEventListener('click', (e) => { 
      setTimeout(() => {
        menuContainer.classList.toggle('open');
        menuTitle.classList.toggle('open');
        menuBurger.classList.toggle('open');
        menuH2.classList.toggle('open');
      }, 50);
    });
    document.addEventListener('click', (e) => {
      if (!menuContainer.contains(e.target) && !menuBurger.contains(e.target)) {
        menuContainer.classList.remove('open');
        menuTitle.classList.remove('open');
        menuBurger.classList.remove('open');
        menuH2.classList.remove('open');  
      }
    });
}

export function setHamburgerWhenLogged(drupalSettings) {
    if (drupalSettings.user.uid != 0) {
      const menuBurger = document.querySelector('#hamburger');
      const menuTitle = document.querySelector('#menu-title');
      const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
      const header = document.querySelector('.dialog-off-canvas-main-canvas');
      const headerTop = header.getBoundingClientRect().top;

      menuTitle.style.top = `${headerTop}px`;        
      menuBurger.style.top = `${headerTop}px`;
      menuContainer.style.paddingTop = `${headerTop}px`;
    }
}