127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
|
|
const links = [
|
|
{ href: "/", label: "Home" },
|
|
{ href: "/uit", label: "UIT" },
|
|
{ href: "/faq", label: "FAQ" },
|
|
{ href: "/contact", label: "Contact" },
|
|
];
|
|
|
|
export default function Nav() {
|
|
const pathname = usePathname();
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const onScroll = () => setScrolled(window.scrollY > 20);
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
return (
|
|
<header
|
|
className="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
|
|
style={{
|
|
background: scrolled ? "rgba(10,10,10,0.85)" : "transparent",
|
|
backdropFilter: scrolled ? "blur(12px)" : "none",
|
|
borderBottom: scrolled ? "1px solid #222222" : "1px solid transparent",
|
|
}}
|
|
>
|
|
<div className="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center gap-2 group">
|
|
<span
|
|
className="text-sm font-semibold tracking-widest uppercase"
|
|
style={{ color: "#ffffff", letterSpacing: "0.15em" }}
|
|
>
|
|
Verimund
|
|
</span>
|
|
<span
|
|
className="text-sm font-light tracking-widest uppercase"
|
|
style={{ color: "#888888", letterSpacing: "0.15em" }}
|
|
>
|
|
Solutions
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop nav */}
|
|
<nav className="hidden md:flex items-center gap-8">
|
|
{links.map(({ href, label }) => {
|
|
const active = pathname === href;
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className="text-sm transition-colors duration-200"
|
|
style={{
|
|
color: active ? "#ffffff" : "#888888",
|
|
fontWeight: active ? 500 : 400,
|
|
}}
|
|
onMouseEnter={(e) => (e.currentTarget.style.color = "#ffffff")}
|
|
onMouseLeave={(e) =>
|
|
(e.currentTarget.style.color = active ? "#ffffff" : "#888888")
|
|
}
|
|
>
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
{/* Mobile hamburger */}
|
|
<button
|
|
className="md:hidden flex flex-col gap-1.5 p-2"
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
aria-label="Toggle menu"
|
|
>
|
|
<span
|
|
className="block w-5 h-px transition-all duration-200"
|
|
style={{
|
|
background: "#ffffff",
|
|
transform: menuOpen ? "rotate(45deg) translate(2px, 2px)" : "none",
|
|
}}
|
|
/>
|
|
<span
|
|
className="block w-5 h-px transition-all duration-200"
|
|
style={{
|
|
background: "#ffffff",
|
|
opacity: menuOpen ? 0 : 1,
|
|
}}
|
|
/>
|
|
<span
|
|
className="block w-5 h-px transition-all duration-200"
|
|
style={{
|
|
background: "#ffffff",
|
|
transform: menuOpen ? "rotate(-45deg) translate(2px, -2px)" : "none",
|
|
}}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Mobile menu */}
|
|
{menuOpen && (
|
|
<div
|
|
className="md:hidden border-t px-6 py-4 flex flex-col gap-4"
|
|
style={{ background: "#0a0a0a", borderColor: "#222222" }}
|
|
>
|
|
{links.map(({ href, label }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className="text-sm"
|
|
style={{ color: pathname === href ? "#ffffff" : "#888888" }}
|
|
onClick={() => setMenuOpen(false)}
|
|
>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</header>
|
|
);
|
|
}
|