diff --git a/assets/js/header.js b/assets/js/header.js index c9dbc1c..3181dd6 100644 --- a/assets/js/header.js +++ b/assets/js/header.js @@ -1,22 +1,35 @@ export function headerToggle() { const header = document.getElementById("site-header"); const buttonToggle = document.querySelector("#menu-toggle"); + const siteMenu = document.getElementById("site-menu"); const overlay = document.getElementById("menu-overlay"); if (!header || !buttonToggle) return; + function openMenu() { + document.body.classList.add("menu-open"); + buttonToggle.setAttribute("aria-expanded", "true"); + buttonToggle.setAttribute("aria-label", "Fermer le menu"); + siteMenu?.removeAttribute("inert"); + } + + function closeMenu() { + document.body.classList.remove("menu-open"); + buttonToggle.setAttribute("aria-expanded", "false"); + buttonToggle.setAttribute("aria-label", "Ouvrir le menu"); + siteMenu?.setAttribute("inert", ""); + } + buttonToggle.addEventListener("click", (e) => { e.stopPropagation(); - document.body.classList.toggle("menu-open"); + document.body.classList.contains("menu-open") ? closeMenu() : openMenu(); }); header.addEventListener("click", () => { - document.body.classList.remove("menu-open"); + if (document.body.classList.contains("menu-open")) closeMenu(); }); - overlay?.addEventListener("click", () => { - document.body.classList.remove("menu-open"); - }); + overlay?.addEventListener("click", closeMenu); } diff --git a/site/snippets/header.php b/site/snippets/header.php index d4df74a..3dd4ce8 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -80,7 +80,7 @@ - diff --git a/site/snippets/nav.php b/site/snippets/nav.php index 5c96dd6..137a6f9 100644 --- a/site/snippets/nav.php +++ b/site/snippets/nav.php @@ -1,4 +1,4 @@ -