menu mobile

web/themes/custom/caravane/assets/js/main.js

@@ -1,6 +1,6 @@
 import { initVueContentModale } from './utils/vue-setup';
 import { processClickableElements } from './utils/process-clickable-elements';
-import { setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
+import { handleReactiveness, setMenuToggle, setHamburgerWhenLogged } from './utils/layout-setup';
 import { initFirstLoadRouting, handleClickableElements } from './utils/handle-navigation';
 import { setupMapStore } from './utils/map-setup';
 
@@ -17,6 +17,7 @@ import '../scss/main.scss'
             const siteName = document.querySelector('#site_name').innerText;
             const { store, mapStore, router, route } = initVueContentModale();            
 
+            handleReactiveness();
             setMenuToggle();
             setHamburgerWhenLogged(drupalSettings);
 

web/themes/custom/caravane/assets/js/stores/layout.js

@@ -0,0 +1,18 @@
+import { defineStore } from 'pinia';
+
+export const useLayoutStore = defineStore('layout', {
+    state: () => ({
+        minDesktopWidth: 992,
+        isDesktop: Boolean,
+        isEtapeListRetracted: Boolean,
+    }),
+    actions: {
+        setupResizeListenner () {
+            this.isDesktop = window.innerWidth >= this.minDesktopWidth ? true : false;
+            window.addEventListener('resize', () => {
+                this.isDesktop = window.innerWidth >= this.minDesktopWidth ? true : false;
+            })
+            this.isEtapeListRetracted = this.isDesktop ? false : true;
+        },
+    },
+})

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');