From d873da0ca5a72ca056bd69ea04e1e9fac0f13e9f Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Thu, 5 Mar 2026 21:33:54 +0100
Subject: [PATCH] =?UTF-8?q?Menu=20mobile=20en=20plein=20=C3=A9cran?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Navbar.astro | 52 +++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index f487d56..4cb1a86 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -69,36 +69,45 @@ function isActive(href: string): boolean {
           class="text-night p-2 focus:outline-none"
           aria-label="Menu"
         >
-          <Icon name="lucide:menu" size={24} id="icon-menu" />
-          <Icon name="lucide:x" size={24} id="icon-close" class="hidden" />
+          <Icon name="lucide:menu" size={24} />
         </button>
       </div>
     </div>
   </div>
 
-  <!-- Mobile Menu -->
+  <!-- Mobile Menu (fullscreen) -->
   <div
     id="mobile-menu"
-    class="md:hidden absolute top-full left-0 w-full bg-white/95 backdrop-blur-xl shadow-2xl border-t border-night/5 hidden animate-slide-down"
+    class="md:hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-xl hidden"
   >
-    <div class="px-6 py-8 space-y-2">
+    <div class="flex flex-col items-center justify-center h-full px-6 space-y-4">
+      <!-- Close button -->
+      <button
+        id="mobile-menu-close"
+        class="absolute top-8 right-6 text-night p-2 focus:outline-none"
+        aria-label="Fermer le menu"
+      >
+        <Icon name="lucide:x" size={28} />
+      </button>
+
       {navLinks.map((link) => (
         <a
           href={link.href}
           class:list={[
-            'block w-full text-left px-4 py-4 text-lg font-display tracking-wide rounded-2xl transition-all',
-            isActive(link.href) ? 'text-dream-coral bg-dream-coral/5 font-bold' : 'text-night/70 hover:bg-night/5',
+            'text-2xl font-display tracking-wide transition-all px-6 py-3 rounded-2xl',
+            isActive(link.href) ? 'text-dream-coral font-bold' : 'text-night/70 hover:text-night',
           ]}
         >
           {link.label}
         </a>
       ))}
-      <div class="flex gap-6 px-4 pt-8 border-t border-night/5">
+
+      <div class="flex gap-8 pt-8 border-t border-night/10 mt-4">
         <a href={companyInfo.socials.instagram} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-pink transition-colors">
-          <Icon name="lucide:instagram" size={24} />
+          <Icon name="lucide:instagram" size={28} />
         </a>
         <a href={companyInfo.socials.facebook} target="_blank" rel="noreferrer" class="text-night/40 hover:text-dream-blue transition-colors">
-          <Icon name="lucide:facebook" size={24} />
+          <Icon name="lucide:facebook" size={28} />
         </a>
       </div>
     </div>
@@ -109,8 +118,7 @@ function isActive(href: string): boolean {
   const navbar = document.getElementById('navbar')!;
   const menuBtn = document.getElementById('mobile-menu-btn')!;
   const mobileMenu = document.getElementById('mobile-menu')!;
-  const iconMenu = document.getElementById('icon-menu')!;
-  const iconClose = document.getElementById('icon-close')!;
+  const menuClose = document.getElementById('mobile-menu-close')!;
 
   // Scroll detection
   window.addEventListener('scroll', () => {
@@ -123,17 +131,15 @@ function isActive(href: string): boolean {
     }
   });
 
-  // Mobile menu toggle
+  // Open mobile menu
   menuBtn.addEventListener('click', () => {
-    const isOpen = !mobileMenu.classList.contains('hidden');
-    if (isOpen) {
-      mobileMenu.classList.add('hidden');
-      iconMenu.classList.remove('hidden');
-      iconClose.classList.add('hidden');
-    } else {
-      mobileMenu.classList.remove('hidden');
-      iconMenu.classList.add('hidden');
-      iconClose.classList.remove('hidden');
-    }
+    mobileMenu.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+  });
+
+  // Close mobile menu
+  menuClose.addEventListener('click', () => {
+    mobileMenu.classList.add('hidden');
+    document.body.style.overflow = '';
   });
 </script>