From 96e703cfac4545f2a71ce91ce77541c32d11a9dc Mon Sep 17 00:00:00 2001
From: Guillaume Dorce <polynux.dev@gmail.com>
Date: Sun, 21 Jan 2024 16:28:11 +0100
Subject: [PATCH] header responsive

---
 src/components/Header.astro | 135 ++++++++++++++++++++++++++++--------
 1 file changed, 106 insertions(+), 29 deletions(-)

diff --git a/src/components/Header.astro b/src/components/Header.astro
index a627d71..71998ad 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -3,36 +3,113 @@ 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>
-        <ul class="flex items-center gap-2 space-x-4">
-          <li>
-            <a href="/le-club" class="font-poppins text-xl">
+<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
-            </a>
-          </li>
-          <li>
-            <a href="/galeries" class="font-poppins text-xl">
+            </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
-            </a>
-          </li>
-          <li>
-            <a href="/contact" class="font-poppins text-xl">
+            </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
-            </a>
-          </li>
-          <li>
-            <a
-              href="/espace-membres"
-              class="bg-white px-6 py-2 font-poppins text-xl text-stone-900"
-            >
+            </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
-            </a>
-          </li>
-        </ul>
-      </nav>
-    </header>
+            </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>