Agent de manu
9a64abff76
- Création composant MobileMenu.jsx avec React - Menu slide-in depuis la droite - Animation hamburger vers X - Overlay semi-transparent - Navigation desktop/mobile adaptative - Design minimal et élégant
59 lines
1.8 KiB
Plaintext
59 lines
1.8 KiB
Plaintext
---
|
|
import MobileMenu from "./MobileMenu.jsx";
|
|
|
|
const currentPath = Astro.url.pathname;
|
|
---
|
|
|
|
<nav class="border-b border-gray-200">
|
|
<div class="max-w-4xl mx-auto px-6 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<a
|
|
href="/"
|
|
class="text-xl font-semibold tracking-tight text-gray-900 hover:text-gray-600 transition-colors"
|
|
>
|
|
Starter Kit
|
|
</a>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div class="hidden md:flex gap-8">
|
|
<a
|
|
href="/"
|
|
class:list={[
|
|
"text-sm font-medium transition-colors",
|
|
currentPath === "/"
|
|
? "text-gray-900"
|
|
: "text-gray-500 hover:text-gray-900",
|
|
]}
|
|
>
|
|
Home
|
|
</a>
|
|
<a
|
|
href="/about"
|
|
class:list={[
|
|
"text-sm font-medium transition-colors",
|
|
currentPath === "/about"
|
|
? "text-gray-900"
|
|
: "text-gray-500 hover:text-gray-900",
|
|
]}
|
|
>
|
|
About
|
|
</a>
|
|
<a
|
|
href="/contact"
|
|
class:list={[
|
|
"text-sm font-medium transition-colors",
|
|
currentPath === "/contact"
|
|
? "text-gray-900"
|
|
: "text-gray-500 hover:text-gray-900",
|
|
]}
|
|
>
|
|
Contact
|
|
</a>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
<MobileMenu currentPath={currentPath} client:load />
|
|
</div>
|
|
</div>
|
|
</nav>
|