corrections menu static toggle

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

@@ -5,6 +5,7 @@ export const useLayoutStore = defineStore('layout', {
         minDesktopWidth: 992,
         isDesktop: Boolean,
         isEtapeListRetracted: Boolean,
+        isHamburgerMenuOpen: false,
     }),
     actions: {
         setupResizeListenner () {
@@ -32,5 +33,39 @@ export const useLayoutStore = defineStore('layout', {
             }, 300);
             this.isEtapeListRetracted = false;
         },
+        setUpHamburgerToggle(menuBurger, menuContainer) {
+            const menuTitle = document.querySelector('#menu-title');
+            const menuH2 = document.querySelector('#menu > h2');
+
+            menuBurger.addEventListener('click', (e) => { 
+              setTimeout(() => {
+                  if (!this.isHamburgerMenuOpen) menuContainer.style.display = 'block';
+                  menuContainer.classList.toggle('open');
+                  menuTitle.classList.toggle('open');
+                  menuBurger.classList.toggle('open');
+                  menuH2.classList.toggle('open');
+                  if (this.isHamburgerMenuOpen) {
+                    setTimeout(() => {
+                        menuContainer.style.display = 'none';
+                        this.isHamburgerMenuOpen = !this.isHamburgerMenuOpen;
+                    }, 300);
+                  }
+              }, 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');  
+                  setTimeout(() => {
+                    if (this.isHamburgerMenuOpen) {
+                        menuContainer.style.display = 'none';
+                    }
+                    this.isHamburgerMenuOpen = false;
+                  }, 300);
+                }
+              });
+            });
+        }
     },
 })

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

@@ -33,27 +33,11 @@ export function handleReactiveness() {
 }
 
 export function setMenuToggle() {
-    const menuButton = document.querySelector('#block-caravane-mainnavigation > #menu');
+    const layoutStore = useLayoutStore();
-    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');
+    const menuContainer = document.querySelector('#block-caravane-mainnavigation > #menu > ul');
-    menuButton.addEventListener('click', (e) => { 
+    
-      setTimeout(() => {
+    layoutStore.setUpHamburgerToggle(menuBurger, menuContainer);
-        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) {

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

@@ -181,9 +181,14 @@ body{
                 height: 3px;
                 margin: 4px 0;
                 border-radius: 2px;
-                background-color: $main-color-light;
+                background-color: white;
                 opacity: 1;
                 transition: transform 0.5s, opacity 0.2s;
+                margin-right: 3vw;
+                @media screen and (min-width: $desktop-min-width) {
+                  margin-right: 0;
+                  background-color: $main-color-light;
+                }
               }
             }
             > #hamburger:hover {
@@ -216,7 +221,7 @@ body{
               width: $menu-mobile-width;
               right: $body-margin-x;
               padding: 0;
-              padding-top: 1.5rem;
+              padding-top: 2rem;
               padding-bottom: 1.5rem;
               top: -5vh;
               opacity: 0;
@@ -254,7 +259,7 @@ body{
             }
             > ul.open {
               opacity: 1;
-              top: 7vh;
+              top: 6vh;
             }
           }
         }
@@ -365,6 +370,9 @@ body{
               .leaflet-tooltip-pane {
                 width: 75vw;
                 pointer-events: none;
+                @media screen and (min-width: $tablet-min-width) {
+                  width: 40vw;
+                }
                 @media screen and (min-width: $desktop-min-width) {
                   width: 25vw;
                 }
@@ -376,6 +384,7 @@ body{
                   border-radius: 0 !important;
                   background-color: transparent;
                   border: none;
+                  width: 100%;
                   > div {
                     max-height: 15vh;
                     overflow: hidden;