diff --git a/assets/app.js b/assets/app.js index 66dd761..9f01bd6 100644 --- a/assets/app.js +++ b/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'); } }); diff --git a/assets/stimulus_bootstrap.js b/assets/stimulus_bootstrap.js index d0bf4cb..3824486 100644 --- a/assets/stimulus_bootstrap.js +++ b/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);