45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import type { ReactNode } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
/**
|
|
* Sidebar link that highlights when its route is active. "/admin" matches
|
|
* exactly; every other entry also matches its sub-routes (e.g. /admin/radio is
|
|
* active on /admin/radio/history) so the current section stays lit.
|
|
*/
|
|
export function AdminNavLink({
|
|
href,
|
|
icon,
|
|
children,
|
|
}: {
|
|
href: string;
|
|
icon?: ReactNode;
|
|
children: ReactNode;
|
|
}) {
|
|
const pathname = usePathname() ?? "";
|
|
const active =
|
|
href === "/admin" ? pathname === "/admin" : pathname === href || pathname.startsWith(`${href}/`);
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={`flex items-center gap-2.5 px-2.5 py-2 rounded-xl text-sm font-medium no-underline transition-all duration-150 ${
|
|
active
|
|
? "bg-[var(--admin-accent)]/15 text-[var(--admin-sidebar-text-readable)] shadow-sm border-l-2 border-[var(--admin-accent)]"
|
|
: "text-[var(--admin-sidebar-muted-readable)] hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 hover:no-underline"
|
|
}`}
|
|
>
|
|
{icon ? (
|
|
<span
|
|
className={`flex-none ${active ? "text-[var(--color-primary-readable)]" : "text-[var(--admin-sidebar-muted-readable)]"}`}
|
|
>
|
|
{icon}
|
|
</span>
|
|
) : null}
|
|
<span>{children}</span>
|
|
</Link>
|
|
);
|
|
}
|