34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* NavLink — primary-nav link with an active-page indicator.
|
||
|
|
*
|
||
|
|
* Reads usePathname to decide whether this link points at the active route,
|
||
|
|
* then renders a visible gold underline plus a brighter text colour and
|
||
|
|
* sets `aria-current="page"` for screen readers. A link counts as active for
|
||
|
|
* its exact path AND for descendant paths (e.g. /sightings is active when
|
||
|
|
* on /sightings/EV-1947-…), so deep pages still highlight their section.
|
||
|
|
*/
|
||
|
|
import Link from "next/link";
|
||
|
|
import { usePathname } from "next/navigation";
|
||
|
|
|
||
|
|
export function NavLink({ href, label }: { href: string; label: string }) {
|
||
|
|
const pathname = usePathname() || "/";
|
||
|
|
const isActive =
|
||
|
|
pathname === href || (href !== "/" && pathname.startsWith(`${href}/`));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
href={href}
|
||
|
|
aria-current={isActive ? "page" : undefined}
|
||
|
|
className={
|
||
|
|
isActive
|
||
|
|
? "px-2.5 py-1.5 rounded text-[#e0c080] bg-[rgba(224,192,128,0.10)] border-b-2 border-[#e0c080] -mb-[2px] transition-colors"
|
||
|
|
: "px-2.5 py-1.5 rounded text-[#cbd2dd] hover:text-[#e0c080] hover:bg-[rgba(224,192,128,0.06)] border-b-2 border-transparent -mb-[2px] transition-colors"
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
}
|