From ff82fa9b5604eab698e069403e3b7e69ef257a0f Mon Sep 17 00:00:00 2001 From: maurine Date: Fri, 10 Apr 2026 00:02:45 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20refonte=20de=20la=20navbar=20(responsiv?= =?UTF-8?q?e,=20menu=20hamburger,=20onglets,=20design)=20et=20mise=20?= =?UTF-8?q?=C3=A0=20jour=20du=20footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/app.js | 39 ++++++++++- templates/_navbar.html.twig | 132 +++++++++++++++++++++--------------- templates/base.html.twig | 2 +- 3 files changed, 118 insertions(+), 55 deletions(-) diff --git a/assets/app.js b/assets/app.js index 257f14e..66dd761 100644 --- a/assets/app.js +++ b/assets/app.js @@ -5,6 +5,43 @@ import './stimulus_bootstrap.js'; * We recommend including the built version of this JavaScript file * (and its CSS file) in your base layout (base.html.twig). */ - // any CSS you import will output into a single css file (app.css in this case) 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'); + const menu = document.getElementById('main-menu'); + 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'); + + // Mise ne place de l'accessibilité + const isHidden = menu.classList.contains('hidden'); + 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(); + } + }); + }); + } +}); diff --git a/templates/_navbar.html.twig b/templates/_navbar.html.twig index c66b218..e78146a 100644 --- a/templates/_navbar.html.twig +++ b/templates/_navbar.html.twig @@ -1,65 +1,91 @@ - diff --git a/templates/base.html.twig b/templates/base.html.twig index 7df3118..9e2990a 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -61,7 +61,7 @@ {# Gestion du pied-de-page #} -