37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { cn } from "@/lib/utils";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
|
import type { NavItem } from "@/components/nav/nav-items";
|
|
|
|
export function SideNavItem({ item, collapsed }: { item: NavItem; collapsed: boolean }) {
|
|
const pathname = usePathname();
|
|
const isActive = pathname === item.href;
|
|
|
|
const link = (
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
|
"hover:bg-accent hover:text-accent-foreground",
|
|
collapsed && "justify-center px-0",
|
|
isActive && "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--primary)]"
|
|
)}
|
|
>
|
|
<item.icon className="size-5 shrink-0" />
|
|
{!collapsed && <span className="truncate">{item.label}</span>}
|
|
</Link>
|
|
);
|
|
|
|
if (!collapsed) return link;
|
|
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger render={link} />
|
|
<TooltipContent side="right">{item.label}</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|