44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import type { ComponentType, SVGProps } from 'react';
|
|
import { NavLink } from 'react-router-dom';
|
|
|
|
type IconType = ComponentType<SVGProps<SVGSVGElement>>;
|
|
|
|
type SidebarNavItemProps = {
|
|
to: string;
|
|
label: string;
|
|
icon: IconType;
|
|
collapsed: boolean;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
export function SidebarNavItem({
|
|
to,
|
|
label,
|
|
icon: Icon,
|
|
collapsed,
|
|
onClick,
|
|
}: Readonly<SidebarNavItemProps>) {
|
|
const layoutClass = collapsed
|
|
? 'mx-auto w-8 justify-center px-0'
|
|
: 'px-2 lg:w-full lg:justify-start';
|
|
|
|
return (
|
|
<NavLink
|
|
to={to}
|
|
onClick={onClick}
|
|
className={({ isActive }) =>
|
|
`inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
|
|
isActive ? 'ui-accent-active' : 'ui-body-secondary hover:bg-zinc-500/15'
|
|
}`
|
|
}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
{!collapsed ? (
|
|
<span className="ml-2 truncate leading-none">{label}</span>
|
|
) : (
|
|
<span className="ml-2 lg:hidden">{label}</span>
|
|
)}
|
|
</NavLink>
|
|
);
|
|
}
|