104 lines
3.1 KiB
Plaintext
104 lines
3.1 KiB
Plaintext
---
|
|
// HamburgerMenu - drawer slide-in left avec liens nav (PC2)
|
|
// Astro vanilla + script inline, pas besoin d'island Vue
|
|
---
|
|
<button
|
|
id="hamburger-trigger"
|
|
type="button"
|
|
class="fixed top-4 right-4 z-50 p-3 bg-white/95 border border-neutral-200 rounded-lg shadow-md hover:bg-white transition-colors md:top-6 md:right-6"
|
|
aria-label="Ouvrir le menu"
|
|
aria-expanded="false"
|
|
aria-controls="hamburger-drawer"
|
|
>
|
|
<span class="block w-5 h-0.5 bg-neutral-800 mb-1"></span>
|
|
<span class="block w-5 h-0.5 bg-neutral-800 mb-1"></span>
|
|
<span class="block w-5 h-0.5 bg-neutral-800"></span>
|
|
</button>
|
|
|
|
<div
|
|
id="hamburger-drawer"
|
|
class="fixed inset-0 z-40 hidden"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label="Menu de navigation"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-black/30 transition-opacity"
|
|
data-drawer-close
|
|
aria-hidden="true"
|
|
></div>
|
|
<nav
|
|
id="hamburger-nav"
|
|
class="absolute left-0 top-0 h-full w-72 max-w-[80vw] bg-white shadow-xl p-6 transform -translate-x-full transition-transform duration-200 ease-out"
|
|
>
|
|
<button
|
|
type="button"
|
|
data-drawer-close
|
|
class="absolute top-4 right-4 w-9 h-9 flex items-center justify-center text-neutral-500 hover:text-neutral-900 text-2xl leading-none rounded-md hover:bg-neutral-100"
|
|
aria-label="Fermer le menu"
|
|
>
|
|
×
|
|
</button>
|
|
<ul class="mt-12 space-y-1 text-base">
|
|
<li>
|
|
<a
|
|
href="/a-propos"
|
|
class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
|
|
>
|
|
A propos
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/manifeste"
|
|
class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
|
|
>
|
|
Manifeste
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/mentions-legales"
|
|
class="block px-3 py-2 rounded-md text-neutral-800 hover:bg-neutral-100 hover:text-neutral-900 transition-colors"
|
|
>
|
|
Mentions legales
|
|
</a>
|
|
</li>
|
|
<!-- TODO V2 : ajouter liens ici (newsletter, soutien Liberapay, contact) -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<script>
|
|
const trigger = document.getElementById('hamburger-trigger');
|
|
const drawer = document.getElementById('hamburger-drawer');
|
|
const nav = document.getElementById('hamburger-nav');
|
|
|
|
const open = () => {
|
|
if (!drawer || !nav) return;
|
|
drawer.classList.remove('hidden');
|
|
trigger?.setAttribute('aria-expanded', 'true');
|
|
requestAnimationFrame(() => nav.classList.remove('-translate-x-full'));
|
|
};
|
|
|
|
const close = () => {
|
|
if (!drawer || !nav) return;
|
|
nav.classList.add('-translate-x-full');
|
|
trigger?.setAttribute('aria-expanded', 'false');
|
|
setTimeout(() => drawer.classList.add('hidden'), 200);
|
|
};
|
|
|
|
trigger?.addEventListener('click', open);
|
|
|
|
drawer?.querySelectorAll('[data-drawer-close]').forEach((el) =>
|
|
el.addEventListener('click', close)
|
|
);
|
|
|
|
// ESC pour fermer
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && drawer && !drawer.classList.contains('hidden')) {
|
|
close();
|
|
}
|
|
});
|
|
</script>
|