This commit is contained in:
@@ -11,7 +11,13 @@ type SidebarNavItemProps = {
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Readonly<SidebarNavItemProps>) {
|
||||
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';
|
||||
@@ -20,14 +26,18 @@ export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Re
|
||||
<NavLink
|
||||
to={to}
|
||||
onClick={onClick}
|
||||
className={({ isActive }) => (
|
||||
className={({ isActive }) =>
|
||||
`inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
|
||||
isActive ? 'bg-accent-500 text-white' : '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>}
|
||||
{!collapsed ? (
|
||||
<span className="ml-2 truncate leading-none">{label}</span>
|
||||
) : (
|
||||
<span className="ml-2 lg:hidden">{label}</span>
|
||||
)}
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user