92 lines
3.4 KiB
JavaScript
92 lines
3.4 KiB
JavaScript
import { useState } from 'react'
|
|
import { Menu, X } from 'lucide-react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
|
|
const links = [
|
|
{ href: '#accueil', label: 'Accueil' },
|
|
{ href: '#a-propos', label: 'À propos' },
|
|
{ href: '#services', label: 'Services' },
|
|
{ href: '#galerie', label: 'Galerie' },
|
|
{ href: '#faq', label: 'FAQ' },
|
|
{ href: '#contact', label: 'Contact' },
|
|
]
|
|
|
|
export default function Navbar() {
|
|
const [open, setOpen] = useState(false)
|
|
|
|
return (
|
|
<motion.header
|
|
initial={{ y: -24, opacity: 0 }}
|
|
animate={{ y: 0, opacity: 1 }}
|
|
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
|
|
className="fixed inset-x-0 top-0 z-50 border-b border-barber-border bg-barber-bg/75 backdrop-blur-xl backdrop-saturate-150"
|
|
>
|
|
<nav
|
|
className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8"
|
|
aria-label="Principale"
|
|
>
|
|
<a
|
|
href="#accueil"
|
|
className="group font-serif text-lg font-medium tracking-tight text-barber-cream sm:text-xl"
|
|
>
|
|
<span className="transition-colors group-hover:text-barber-gold">Atelier</span>{' '}
|
|
<span className="bg-gradient-to-r from-barber-gold to-amber-300 bg-clip-text text-transparent transition-opacity group-hover:opacity-90">
|
|
Royal
|
|
</span>
|
|
</a>
|
|
|
|
<ul className="hidden items-center gap-3 md:flex md:gap-4 lg:gap-5">
|
|
{links.map(({ href, label }) => (
|
|
<li key={href}>
|
|
<a
|
|
href={href}
|
|
className="whitespace-nowrap rounded-full px-3 py-1.5 text-xs font-medium text-barber-cream/75 transition-colors hover:bg-white/[0.06] hover:text-barber-cream lg:text-sm"
|
|
>
|
|
{label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<button
|
|
type="button"
|
|
className="flex h-10 w-10 items-center justify-center rounded-full border border-barber-border bg-white/[0.04] text-barber-gold transition-colors hover:border-barber-gold/50 hover:bg-barber-gold/10 md:hidden"
|
|
aria-expanded={open}
|
|
aria-controls="mobile-menu"
|
|
onClick={() => setOpen((v) => !v)}
|
|
>
|
|
{open ? <X className="h-5 w-5" aria-hidden /> : <Menu className="h-5 w-5" aria-hidden />}
|
|
<span className="sr-only">Menu</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<AnimatePresence>
|
|
{open && (
|
|
<motion.div
|
|
id="mobile-menu"
|
|
initial={{ height: 0, opacity: 0 }}
|
|
animate={{ height: 'auto', opacity: 1 }}
|
|
exit={{ height: 0, opacity: 0 }}
|
|
transition={{ duration: 0.25 }}
|
|
className="overflow-hidden border-b border-barber-border bg-barber-bg/95 backdrop-blur-xl md:hidden"
|
|
>
|
|
<ul className="flex flex-col gap-1 px-4 pb-4">
|
|
{links.map(({ href, label }) => (
|
|
<li key={href}>
|
|
<a
|
|
href={href}
|
|
onClick={() => setOpen(false)}
|
|
className="block rounded-xl px-3 py-3 text-sm font-medium text-barber-cream/90 transition-colors hover:bg-white/[0.06] hover:text-barber-gold"
|
|
>
|
|
{label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</motion.header>
|
|
)
|
|
}
|