125 lines
3.6 KiB
TypeScript
125 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
|
|
const NAV_ITEMS = [
|
|
{ label: "Over", id: "over" },
|
|
{ label: "Ervaring", id: "ervaring" },
|
|
{ label: "Skills", id: "skills" },
|
|
{ label: "Apps", id: "apps" },
|
|
{ label: "Contact", id: "contact" },
|
|
];
|
|
|
|
export function Nav() {
|
|
const [active, setActive] = useState("over");
|
|
const [scrolled, setScrolled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY > 20);
|
|
|
|
const sections = [...NAV_ITEMS].reverse();
|
|
for (const { id } of sections) {
|
|
const el = document.getElementById(id);
|
|
if (el && el.getBoundingClientRect().top < 200) {
|
|
setActive(id);
|
|
break;
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
const handleNav = (id: string) => {
|
|
document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<nav
|
|
className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between transition-all duration-300"
|
|
style={{
|
|
background: scrolled
|
|
? "rgba(15,15,20,0.92)"
|
|
: "rgba(15,15,20,0.6)",
|
|
backdropFilter: "blur(16px)",
|
|
borderBottom: "1px solid rgba(255,255,255,0.06)",
|
|
padding: "0 clamp(20px, 4vw, 60px)",
|
|
height: 64,
|
|
}}
|
|
>
|
|
<span
|
|
className="font-serif text-[22px] tracking-tight"
|
|
style={{ color: "#e8e4df" }}
|
|
>
|
|
JP<span style={{ color: "#c2339b" }}>.</span>
|
|
</span>
|
|
|
|
<div className="hidden sm:flex gap-8">
|
|
{NAV_ITEMS.map(({ label, id }) => (
|
|
<button
|
|
key={id}
|
|
onClick={() => handleNav(id)}
|
|
className="bg-transparent border-none cursor-pointer text-[13px] font-medium uppercase tracking-[1.2px] transition-colors duration-300 pb-1"
|
|
style={{
|
|
color:
|
|
active === id ? "#c2339b" : "rgba(255,255,255,0.5)",
|
|
borderBottom:
|
|
active === id
|
|
? "1px solid #c2339b"
|
|
: "1px solid transparent",
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Mobile menu button */}
|
|
<button
|
|
className="sm:hidden bg-transparent border-none cursor-pointer"
|
|
style={{ color: "rgba(255,255,255,0.6)", fontSize: 20 }}
|
|
onClick={() => {
|
|
const menu = document.getElementById("mobile-menu");
|
|
if (menu) {
|
|
menu.style.display =
|
|
menu.style.display === "flex" ? "none" : "flex";
|
|
}
|
|
}}
|
|
>
|
|
☰
|
|
</button>
|
|
|
|
{/* Mobile dropdown */}
|
|
<div
|
|
id="mobile-menu"
|
|
className="sm:hidden absolute top-[64px] left-0 right-0 flex-col py-4 gap-1"
|
|
style={{
|
|
display: "none",
|
|
background: "rgba(15,15,20,0.95)",
|
|
backdropFilter: "blur(16px)",
|
|
borderBottom: "1px solid rgba(255,255,255,0.06)",
|
|
}}
|
|
>
|
|
{NAV_ITEMS.map(({ label, id }) => (
|
|
<button
|
|
key={id}
|
|
onClick={() => {
|
|
handleNav(id);
|
|
const menu = document.getElementById("mobile-menu");
|
|
if (menu) menu.style.display = "none";
|
|
}}
|
|
className="bg-transparent border-none cursor-pointer text-[14px] font-medium py-3 px-8 text-left transition-colors"
|
|
style={{
|
|
color:
|
|
active === id ? "#c2339b" : "rgba(255,255,255,0.5)",
|
|
}}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|