You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.4 KiB
57 lines
1.4 KiB
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import type { Locale } from "@/lib/site-content";
|
|
|
|
function localize(locale: Locale, path: string) {
|
|
if (!path || path === "/") {
|
|
return `/${locale}`;
|
|
}
|
|
return `/${locale}${path}`;
|
|
}
|
|
|
|
function isActive(pathname: string, href: string) {
|
|
if (href === "/") {
|
|
return pathname === href;
|
|
}
|
|
return pathname === href || pathname.startsWith(`${href}/`);
|
|
}
|
|
|
|
export function MainNav({
|
|
locale,
|
|
labels,
|
|
}: {
|
|
locale: Locale;
|
|
labels: {
|
|
home: string;
|
|
docs: string;
|
|
skills: string;
|
|
console: string;
|
|
pricing: string;
|
|
};
|
|
}) {
|
|
const pathname = usePathname();
|
|
const items = [
|
|
{ href: localize(locale, "/"), label: labels.home },
|
|
{ href: localize(locale, "/docs"), label: labels.docs },
|
|
{ href: localize(locale, "/skills"), label: labels.skills },
|
|
{ href: localize(locale, "/console"), label: labels.console },
|
|
{ href: localize(locale, "/pricing"), label: labels.pricing },
|
|
];
|
|
|
|
return (
|
|
<nav className="main-nav" aria-label="Primary">
|
|
{items.map((item) => (
|
|
<Link
|
|
aria-current={isActive(pathname, item.href) ? "page" : undefined}
|
|
className={`nav-link ${isActive(pathname, item.href) ? "nav-link-active" : ""}`}
|
|
href={item.href}
|
|
key={item.href}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|
|
|