burger menu nav principal

2025-10-03 14:04:22 +02:00
parent c4f12aab1d
commit d4c0650153
6 changed files with 396 additions and 11 deletions
@@ -0,0 +1,84 @@
+/* themes/custom/reha/assets/js/menu-burger-auto.js */
+(function (Drupal) {
+  console.log("helloBurger");
+    Drupal.behaviors.rehaAutoBurger = {
+      attach: function (context) {
+        const root = context.querySelector('#block-reha-navigationprincipale');
+        if (!root) return;
+  
+        const menu = root.querySelector('#main-nav');
+        if (!menu) return;
+  
+        // Éviter le double-init
+        if (root.dataset.burgerInit === '1') return;
+        root.dataset.burgerInit = '1';
+  
+        // Crée le bouton
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'rb-toggle';
+        btn.setAttribute('aria-expanded', 'false');
+        btn.setAttribute('aria-controls', 'main-nav');
+        btn.innerHTML = `
+          <span class="rb-sr">Ouvrir le menu</span>
+          <span aria-hidden="true" class="rb-burger">
+            <span class="rb-line"></span><span class="rb-line"></span><span class="rb-line"></span>
+          </span>
+        `;
+  
+        // Insère le bouton avant la liste
+        menu.parentNode.insertBefore(btn, menu);
+  
+        // Marque le menu comme repliable
+        menu.classList.add('rb-list');
+        // Masqué par défaut en mobile (le CSS gère desktop)
+        menu.hidden = true;
+  
+        // Helpers
+        function openMenu() {
+          btn.setAttribute('aria-expanded', 'true');
+          btn.classList.add('is-active');
+          menu.hidden = false;
+          const first = menu.querySelector('a');
+          if (first) first.focus();
+        }
+        function closeMenu() {
+          btn.setAttribute('aria-expanded', 'false');
+          btn.classList.remove('is-active');
+          menu.hidden = true;
+          btn.focus();
+        }
+        function toggleMenu() {
+          (btn.getAttribute('aria-expanded') === 'true') ? closeMenu() : openMenu();
+        }
+  
+        // Événements
+        btn.addEventListener('click', toggleMenu);
+        document.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') closeMenu();
+        });
+        document.addEventListener('click', (e) => {
+          if (btn.getAttribute('aria-expanded') !== 'true') return;
+          if (!root.contains(e.target)) closeMenu();
+        });
+  
+        // Responsif : desktop >= 768px => menu toujours visible
+        const mql = window.matchMedia('(min-width: 768px)');
+        function handleMQ(e) {
+          if (e.matches) {
+            // Desktop
+            menu.hidden = false;
+            btn.setAttribute('aria-expanded', 'false');
+            btn.classList.remove('is-active');
+          } else {
+            // Mobile
+            if (btn.getAttribute('aria-expanded') !== 'true') menu.hidden = true;
+          }
+        }
+        if (mql.addEventListener) mql.addEventListener('change', handleMQ);
+        else mql.addListener(handleMQ);
+        handleMQ(mql);
+      }
+    };
+  })(Drupal);
+