drupal-caravane/web/themes/custom/caravane/assets/js/utils/layout-setup.js

import { useLayoutStore } from '../stores/layout';

export function handleReactiveness() {
  const layoutStore = useLayoutStore();
  layoutStore.setupResizeListenner();

  (function setupEtapeListeCollapse() {
    const listeToggleButton = document.querySelector('#retractable-message');

    const listeEtape = document.querySelector('#etapes-liste');

    if (!layoutStore.isDesktop) collapseEtapeListe(listeEtape, layoutStore);

    window.addEventListener('resize', () => {
      if (layoutStore.isDesktop && layoutStore.isEtapeListRetracted) {
        expandEtapeListe(listeEtape, layoutStore);
      } else if (!layoutStore.isDesktop && !layoutStore.isEtapeListRetracted) {
        collapseEtapeListe(listeEtape, layoutStore);
      }
    });

    listeToggleButton.addEventListener('click', () => {  
      if (!layoutStore.isDesktop) {
        if (!layoutStore.isEtapeListRetracted) {
          collapseEtapeListe(listeEtape, layoutStore);
        } else {
          expandEtapeListe(listeEtape, layoutStore);
        }
      }  
    });
  })();

  function collapseEtapeListe(listeEtape, layoutStore) {
    listeEtape.classList.add('retracted');
    setTimeout(() => {
      listeEtape.closest('.layout__region').classList.add('retracted');
      listeEtape.nextElementSibling.classList.add('retracted');
    }, 300);
    layoutStore.isEtapeListRetracted = true;
  }

  function expandEtapeListe(listeEtape, layoutStore) {
    listeEtape.closest('.layout__region').classList.remove('retracted');
    listeEtape.nextElementSibling.classList.remove('retracted');
    setTimeout(() => {
      listeEtape.classList.remove('retracted');
    }, 300);
    layoutStore.isEtapeListRetracted = false;
  }
}

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`;
    }
}