form added

src/components/Header.tsx

@@ -1,7 +1,11 @@
+'use client'
+import { useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 
 const Header = () => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
   const navItems = [
     { label: 'Nos Produits', href: '/produits' },
     { label: 'Notre Histoire', href: '/notre-histoire' },
@@ -10,7 +14,7 @@ const Header = () => {
   ];
 
   return (
-    <header className="bg-white shadow-sm">
+    <header className="bg-white shadow-sm relative">
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-20">
           {/* Logo */}
@@ -27,7 +31,7 @@ const Header = () => {
             </span>
           </Link>
 
-          {/* Navigation */}
+          {/* Desktop Navigation */}
           <nav className="hidden md:flex space-x-8">
             {navItems.map((item) => (
               <Link
@@ -41,7 +45,11 @@ const Header = () => {
           </nav>
 
           {/* Mobile menu button */}
-          <button className="md:hidden p-2">
+          <button 
+            className="md:hidden p-2"
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            aria-label="Toggle menu"
+          >
             <svg
               className="h-6 w-6 text-bakery-700"
               fill="none"
@@ -55,6 +63,44 @@ const Header = () => {
             </svg>
           </button>
         </div>
+
+        {/* Mobile Navigation */}
+        <div className={`
+          md:hidden fixed inset-0 bg-white z-50 transform transition-transform duration-300 ease-in-out
+          ${isMobileMenuOpen ? 'translate-x-0' : 'translate-x-full'}
+        `}>
+          <div className="p-4">
+            <div className="flex justify-between items-center mb-8">
+              <span className="font-serif text-xl text-bakery-800">Menu</span>
+              <button 
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="p-2"
+                aria-label="Close menu"
+              >
+                <svg 
+                  className="h-6 w-6 text-bakery-700" 
+                  fill="none" 
+                  viewBox="0 0 24 24" 
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <nav className="flex flex-col space-y-4">
+              {navItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="text-bakery-700 hover:text-bakery-900 transition py-2 text-lg"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+          </div>
+        </div>
       </div>
     </header>
   );