header responsive

src/components/Header.astro

@@ -3,12 +3,20 @@ 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">
+<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">
@@ -34,5 +42,74 @@ import logo from "../assets/logo.png"
           </a>
         </li>
       </ul>
+    </div>
   </nav>
-    </header>
+  <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>