melvin-leveque/interface-kaznautes
2
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
maurine
2026-04-11 10:30:04 +02:00
parent ff82fa9b56
commit 08e3815a88
2 changed files with 26 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
assets/app.js
View File

@@ -9,39 +9,37 @@ import './stimulus_bootstrap.js';
import './styles/app.css'; import './styles/app.css';
// --- Gestion du responsive de la barre de navigation (menu hamburger) --- // // --- Gestion du responsive de la barre de navigation (menu hamburger) --- //
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('click', (event) => {
// --- Gestion de l'affichage du menu hamburger --- //
const btn = document.getElementById('mobile-menu-button'); // 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 menu = document.getElementById('main-menu');
const btn = document.getElementById('mobile-menu-button');
const iconClosed = document.getElementById('icon-menu-closed'); const iconClosed = document.getElementById('icon-menu-closed');
const iconOpen = document.getElementById('icon-menu-open'); const iconOpen = document.getElementById('icon-menu-open');
if (hamburger && menu) { // Option 1 : Clic sur le bouton hamburger
// Fonction pour gérer l'ouverture/fermeture du menu if (isClickOnButton && menu) {
const toggleMenu = () => {
menu.classList.toggle('hidden'); menu.classList.toggle('hidden');
// Gestion alternance bouton hamburger ou croix
iconClosed.classList.toggle('hidden'); iconClosed.classList.toggle('hidden');
iconOpen.classList.toggle('hidden'); iconOpen.classList.toggle('hidden');
// Mise ne place de l'accessibilité btn.setAttribute('aria-expanded', !menu.classList.contains('hidden'));
const isHidden = menu.classList.contains('hidden'); return;
btn.setAttribute('aria-expanded', !isHidden);
};
// Action au clic sur le bouton hamburger
btn.addEventListener('click', toggleMenu);
// 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();
} }
});
}); // 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');
btn.setAttribute('aria-expanded', 'false');
} }
}); });

9
assets/stimulus_bootstrap.js
View File

@@ -1,13 +1,6 @@
import { startStimulusApp } from '@symfony/stimulus-bundle'; import {startStimulusApp} from '@symfony/stimulus-bundle';
const app = startStimulusApp(); 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 // register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController); // app.register('some_controller_name', SomeImportedController);