ActiveNavLink

1"use client";
2 
3import type { ReactNode } from "react";
4 
5import Link from "next/link";
6import { usePathname } from "next/navigation";
7 
8import { isPathActive } from "@/lib/navigation-path";
9import { cn } from "@/lib/utils";
10 
11interface ActiveNavLinkProps {
12  href: string;
13  children: ReactNode;
14  className?: string;
15  activeClassName?: string;
16  inactiveClassName?: string;
17}
18 
19/** Nav link with the slide-in underline; underline sticks when active. */
20export function ActiveNavLink({
21  href,
22  children,
23  className,
24  activeClassName,
25  inactiveClassName,
26}: ActiveNavLinkProps) {
27  const pathname = usePathname();
28  const active = isPathActive(pathname, href);
29 
30  return (
31    <Link
32      href={href}
33      aria-current={active ? "page" : undefined}
34      className={cn(
35        "nav-underline",
36        active && "nav-underline-active",
37        className,
38        active ? activeClassName : inactiveClassName,
39      )}
40    >
41      {children}
42    </Link>
43  );
44}