1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
"use client";
import { useState } from "react";
import Link from "next/link";
import { Menu, X, Shield } from "lucide-react";
import { cn } from "@/lib/utils";
const navigation = [
{ name: "Accueil", href: "/" },
{ name: "Services", href: "/services" },
{ name: "Articles", href: "/articles" },
{ name: "Démos", href: "/demos" },
{ name: "À propos", href: "/about" },
];
export function Header() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
return (
<header className="sticky top-0 z-50 bg-cosmos-900/95 backdrop-blur-sm border-b border-cosmos-800">
<nav className="mx-auto max-w-7xl px-6 lg:px-8" aria-label="Navigation principale">
<div className="flex h-16 items-center justify-between">
<Link href="/" className="flex items-center gap-3 group">
<div className="w-9 h-9 rounded-lg bg-araucaria-500 flex items-center justify-center group-hover:bg-araucaria-400 transition-colors">
<Shield className="w-5 h-5 text-cosmos-950" />
</div>
<span className="text-lg font-bold text-nieve tracking-tight">
Der-topogo
</span>
</Link>
<div className="hidden md:flex md:items-center md:gap-1">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="px-4 py-2 text-sm font-medium text-cosmos-200 hover:text-nieve hover:bg-cosmos-800 rounded-lg transition-colors"
>
{item.name}
</Link>
))}
<Link
href="/contact"
className="ml-4 px-5 py-2 text-sm font-semibold bg-kultrun-700 text-nieve rounded-lg hover:bg-kultrun-600 transition-colors"
>
Contact
</Link>
</div>
<button
type="button"
className="md:hidden p-2 text-cosmos-200 hover:text-nieve"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
>
<span className="sr-only">Ouvrir le menu</span>
{mobileMenuOpen ? (
<X className="h-6 w-6" />
) : (
<Menu className="h-6 w-6" />
)}
</button>
</div>
<div
className={cn(
"md:hidden overflow-hidden transition-all duration-300",
mobileMenuOpen ? "max-h-96 pb-4" : "max-h-0"
)}
>
<div className="space-y-1 pt-2">
{navigation.map((item) => (
<Link
key={item.name}
href={item.href}
className="block px-4 py-3 text-base font-medium text-cosmos-200 hover:text-nieve hover:bg-cosmos-800 rounded-lg transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
{item.name}
</Link>
))}
<Link
href="/contact"
className="block px-4 py-3 text-base font-semibold text-kultrun-300 hover:text-kultrun-200 hover:bg-cosmos-800 rounded-lg transition-colors"
onClick={() => setMobileMenuOpen(false)}
>
Contact
</Link>
</div>
</div>
</nav>
</header>
);
}
|
