menu mobile

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

@@ -1,3 +1,54 @@
+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');