46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
import './stimulus_bootstrap.js';
|
|
/*
|
|
* Welcome to your app's main JavaScript file!
|
|
*
|
|
* 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('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');
|
|
|
|
// Option 1 : Clic sur le bouton hamburger
|
|
if (isClickOnButton && menu) {
|
|
menu.classList.toggle('hidden');
|
|
iconClosed.classList.toggle('hidden');
|
|
iconOpen.classList.toggle('hidden');
|
|
|
|
btn.setAttribute('aria-expanded', !menu.classList.contains('hidden'));
|
|
return;
|
|
}
|
|
|
|
// 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');
|
|
}
|
|
});
|