57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { navItems, resourceItems } from "@/lib/navigation";
|
|
|
|
export function SiteHeader() {
|
|
const pathname = usePathname();
|
|
const current = pathname === "/" ? "home" : pathname.split("/")[1];
|
|
const resourcesActive = current === "faq" || current === "resources";
|
|
|
|
return (
|
|
<header className="site-header">
|
|
<Link className="brand" href="/">
|
|
<div className="brand-name">Paprika</div>
|
|
<div className="brand-tag">Attorney Curated Evidence Building for O-1 Talent</div>
|
|
</Link>
|
|
<nav className="nav" id="nav">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.key}
|
|
href={item.href}
|
|
data-page={item.key}
|
|
className={current === item.key ? "active" : undefined}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<div className="nav-dropdown">
|
|
<Link
|
|
href="/resources"
|
|
className={`nav-trigger${resourcesActive ? " active" : ""}`}
|
|
data-page="resources"
|
|
>
|
|
Resources <span className="nav-chevron">⌄</span>
|
|
</Link>
|
|
<div className="resources-menu" aria-label="Resources menu">
|
|
{resourceItems.map((item) => (
|
|
<Link key={item.key} href={item.href} data-page={item.key}>
|
|
<strong>{item.label}</strong>
|
|
<span>{item.description}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Link
|
|
href="/start"
|
|
className={`start${current === "start" ? " active" : ""}`}
|
|
data-page="start"
|
|
>
|
|
Start Here <span className="button-arrow">→</span>
|
|
</Link>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|