Archived
109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
'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' },
|
|
{ label: 'Commander', href: '/commander' },
|
|
{ label: 'Contact', href: '/contact' },
|
|
];
|
|
|
|
return (
|
|
<header className="bg-white shadow-sm relative">
|
|
<div className="container mx-auto px-4">
|
|
<div className="flex items-center justify-between h-20">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center">
|
|
<Image
|
|
src="/images/ressources/logo.png"
|
|
alt="Au Blé d'Or - Boulangerie Artisanale"
|
|
width={60}
|
|
height={60}
|
|
className="h-12 w-auto"
|
|
/>
|
|
<span className="ml-3 font-serif text-xl text-bakery-800">
|
|
Au Blé d'Or
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex space-x-8">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className="text-bakery-700 hover:text-bakery-900 transition"
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
className="md:hidden p-2"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
<svg
|
|
className="h-6 w-6 text-bakery-700"
|
|
fill="none"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</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>
|
|
);
|
|
};
|
|
|
|
export default Header;
|