feat: amélioration de la gestion du menu hamburger (clic hors menu, onglets, boutons) et simplification du bootstrap Stimulus

assets/app.js

@@ -9,39 +9,37 @@ import './stimulus_bootstrap.js';
 import './styles/app.css';
 
 // --- Gestion du responsive de la barre de navigation (menu hamburger) --- //
-document.addEventListener('DOMContentLoaded', () => {
-    // --- Gestion de l'affichage du menu hamburger --- //
-    const btn = document.getElementById('mobile-menu-button');
+document.addEventListener('click', (event) => {
+
+    // Vérification : l'utilisateur a-t-il cliqué sur un élément interactif du menu ?
+    const isClickOnButton = event.target.closest('#mobile-menu-button');
+    const isClickOnLink = event.target.closest('#main-menu a');
+
+    // Si le clic a lieu ailleurs sur la page, on arrête tout
+    if (!isClickOnButton && !isClickOnLink) return;
+
+    // Si l'utilisateur a bien cliqué sur un élément interactif, on récupère les éléments du DOM
     const menu = document.getElementById('main-menu');
+    const btn = document.getElementById('mobile-menu-button');
     const iconClosed = document.getElementById('icon-menu-closed');
     const iconOpen = document.getElementById('icon-menu-open');
 
-    if (hamburger && menu) {
-        // Fonction pour gérer l'ouverture/fermeture du menu
-        const toggleMenu = () => {
-            menu.classList.toggle('hidden');
-            // Gestion alternance bouton hamburger ou croix
-            iconClosed.classList.toggle('hidden');
-            iconOpen.classList.toggle('hidden');
+    // Option 1 : Clic sur le bouton hamburger
+    if (isClickOnButton && menu) {
+        menu.classList.toggle('hidden');
+        iconClosed.classList.toggle('hidden');
+        iconOpen.classList.toggle('hidden');
 
-            // Mise ne place de l'accessibilité
-            const isHidden = menu.classList.contains('hidden');
-            btn.setAttribute('aria-expanded', !isHidden);
-        };
+        btn.setAttribute('aria-expanded', !menu.classList.contains('hidden'));
+        return;
+    }
 
-        // Action au clic sur le bouton hamburger
-        btn.addEventListener('click', toggleMenu);
+    // Option 2 : Clic sur un onglet du menu
+    if (isClickOnLink && menu && !menu.classList.contains('hidden')) {
+        menu.classList.add('hidden');
+        iconClosed.classList.remove('hidden');
+        iconOpen.classList.add('hidden');
 
-        // Action au clic sur un des liens du menu
-        const menuLinks = menu.querySelectorAll('a');
-
-        menuLinks.forEach(link => {
-            link.addEventListener('click', () => {
-                // On force la fermeture au clic uniquement si le menu est ouvert sur mobile
-                if (!menu.classList.contains('hidden')) {
-                    toggleMenu();
-                }
-            });
-        });
+        btn.setAttribute('aria-expanded', 'false');
     }
 });

assets/stimulus_bootstrap.js

@@ -1,13 +1,6 @@
-import { startStimulusApp } from '@symfony/stimulus-bundle';
+import {startStimulusApp} from '@symfony/stimulus-bundle';
 
 const app = startStimulusApp();
-import { startStimulusApp } from '@symfony/stimulus-bridge';
 
-// Registers Stimulus controllers from controllers.json and in the controllers/ directory
-export const app = startStimulusApp(require.context(
-    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
-    true,
-    /\.[jt]sx?$/
-));
 // register any custom, 3rd party controllers here
 // app.register('some_controller_name', SomeImportedController);