drupal-reha/web/themes/custom/reha/dist/menu-burger-auto.js

/* 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);