hadnling footer sub menu behaviour

resources/js/menus.js

@@ -26,12 +26,41 @@ export default function menuInit() {
       footer.querySelector('.sub-menu--open') !== null
     );
   }
+  function isFooterSubmenu(buttonToggle) {
+    let currentElement = buttonToggle;
+
+    for (let i = 0; i < 6; i++) {
+      currentElement = currentElement.parentElement;
+
+      // Vérifiez si l'élément actuel est un menu-renovateur--footer
+
+      if (currentElement.classList.contains('menu-renovateur--footer')) {
+        console.log(`FOUND IT !`);
+
+        return true; // Si trouvé, retournez true
+      }
+      // Arrêtez la boucle si l'élément actuel est null (pas plus de parents)
+      if (!currentElement) {
+        break;
+      }
+    }
+    return false;
+    // return buttonToggle.parentElement.parentElement.parentElement.parentElement.classList.contains(
+    //   'menu-renovateur--footer'
+    // );
+  }
 
   function openSubmenu(buttonToggle) {
     let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
+    const submenu = buttonToggle.parentElement.querySelector('.sub-menu');
     buttonToggle.setAttribute('aria-expanded', !isExpanded);
-    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--open');
+
-    buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu--closed');
+    submenu.classList.toggle('sub-menu--open');
+    submenu.classList.toggle('sub-menu--closed');
+
+    if (isFooterSubmenu(buttonToggle)) {
+      submenu.parentElement.parentElement.style.marginBottom = submenu.clientHeight + 'px';
+    }
   }
   function closeSubmenus() {
     const headerOpenSubmenus = header.querySelectorAll('.sub-menu--open');
@@ -49,6 +78,7 @@ export default function menuInit() {
       submenu.parentElement
         .querySelector('.menu-item__submenu-toggle')
         .setAttribute('aria-expanded', 'false');
+      submenu.parentElement.parentElement.style.marginBottom = '0px';
     });
   }
 
@@ -64,8 +94,6 @@ export default function menuInit() {
   }
 
   function closeCurrentSubmenu(buttonClose) {
-    // console.log('close submenu');
-    // console.log(buttonClose.parentElement);
     const currentOpenedSubmenu = buttonClose.parentElement;
 
     currentOpenedSubmenu.classList.remove('sub-menu--open');
@@ -73,7 +101,11 @@ export default function menuInit() {
     currentOpenedSubmenu.parentElement
       .querySelector('.menu-item__submenu-toggle')
       .setAttribute('aria-expanded', 'false');
+    if (isFooterSubmenu(buttonClose)) {
+      currentOpenedSubmenu.parentElement.parentElement.style.marginBottom = '0px';
     }
+  }
+
   // ###HEADER — SUBMENU TOGGGLES open/close
   headerSubmenuToggles.forEach((button) => {
     button.addEventListener('click', () => {
@@ -285,7 +317,6 @@ export default function menuInit() {
     }
   });
 
-  
   /* -----------------------------------------------------------
 	HANDLE FOCUS CHANGE
  -----------------------------------------------------------*/