48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { usePageContext } from "vike-react/usePageContext";
|
|
import { Link } from "@/components/common/Link";
|
|
import { navigation } from "@/lib/navigation";
|
|
import clsx from "clsx";
|
|
|
|
export function Navigation({
|
|
className,
|
|
onLinkClick,
|
|
}: {
|
|
className?: string;
|
|
onLinkClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
}) {
|
|
const { urlPathname } = usePageContext();
|
|
|
|
return (
|
|
<nav className={clsx("text-base lg:text-sm", className)}>
|
|
<ul role="list" className="space-y-9">
|
|
{navigation.map((section) => (
|
|
<li key={section.title}>
|
|
<h2 className="font-display font-medium text-slate-900 dark:text-white">{section.title}</h2>
|
|
<ul
|
|
role="list"
|
|
className="mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800"
|
|
>
|
|
{section.links.map((link) => (
|
|
<li key={link.href} className="relative">
|
|
<Link
|
|
href={link.href}
|
|
onClick={onLinkClick}
|
|
className={clsx(
|
|
"block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full",
|
|
link.href === urlPathname
|
|
? "font-semibold text-violet-500 before:bg-violet-500"
|
|
: "text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300",
|
|
)}
|
|
>
|
|
{link.title}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|