116 lines
4.0 KiB
Plaintext
116 lines
4.0 KiB
Plaintext
---
|
|
import { Image } from "astro:assets"
|
|
import logo from "../assets/logo.png"
|
|
---
|
|
|
|
<header class="flex w-full items-center justify-between bg-gray-800 p-8 text-white">
|
|
<a href="/">
|
|
<Image src={logo} alt="Logo Photo Club Haute Lozère" width={128} height={77} />
|
|
</a>
|
|
<nav>
|
|
<div class="flex md:hidden">
|
|
<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200" id="menu-open">
|
|
<span class="sr-only">Ouvrir le menu</span>
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="hidden md:block">
|
|
<ul class="flex items-center gap-2 space-x-4">
|
|
<li>
|
|
<a href="/le-club" class="font-poppins text-xl">
|
|
Le club
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/galeries" class="font-poppins text-xl">
|
|
Galeries
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/contact" class="font-poppins text-xl">
|
|
Contact
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/espace-membres"
|
|
class="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
|
|
>
|
|
Espace membres
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<div class="hidden" role="dialog" aria-modal="true" style="display: none" id="mobile-menu">
|
|
<div class="fixed inset-0 z-10" id="menu-click-over"></div>
|
|
<div class="fixed right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6
|
|
sm:max-w-sm ring-1 ring-gray-900/10 sm:right-4 rounded-md">
|
|
<div class="flex items-center justify-end">
|
|
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" id="menu-close">
|
|
<span class="sr-only">Fermer</span>
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="mt-6">
|
|
<nav class="grid gap-6 text-gray-700">
|
|
<a href="/le-club" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
|
|
<div class="ml-4 text-base font-medium">
|
|
Le club
|
|
</div>
|
|
</a>
|
|
<a href="/galeries" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
|
|
<div class="ml-4 text-base font-medium">
|
|
Galeries
|
|
</div>
|
|
</a>
|
|
<a href="/contact" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
|
|
<div class="ml-4 text-base font-medium">
|
|
Contact
|
|
</div>
|
|
</a>
|
|
<a href="/espace-membres" class="-m-3 p-3 flex items-center rounded-lg hover:bg-gray-50">
|
|
<div class="ml-4 text-base font-medium">
|
|
Espace membres
|
|
</div>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</header>
|
|
<script>
|
|
const menu = document.querySelector('#mobile-menu')
|
|
const menuOpen = document.querySelector('#menu-open')
|
|
const menuClose = document.querySelector('#menu-close')
|
|
if (!menu || !menuOpen || !menuClose) {
|
|
throw new Error('Missing menu elements')
|
|
}
|
|
|
|
menuOpen.addEventListener('click', () => {
|
|
menu.setAttribute('style', 'display: block')
|
|
menuOpen.setAttribute('style', 'display: none')
|
|
})
|
|
|
|
menuClose.addEventListener('click', () => {
|
|
menu.setAttribute('style', 'display: none')
|
|
menuOpen.setAttribute('style', 'display: block')
|
|
})
|
|
|
|
const menuClickOver = document.querySelector('#menu-click-over')
|
|
if (!menuClickOver) {
|
|
throw new Error('Missing menu click over element')
|
|
}
|
|
document.addEventListener('click', (event) => {
|
|
if (event.target === menuClickOver) {
|
|
menu.setAttribute('style', 'display: none')
|
|
menuOpen.setAttribute('style', 'display: block')
|
|
}
|
|
})
|
|
</script>
|