53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import { NavLink } from 'react-router'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
import { MENU } from './menu'
|
|
|
|
export const Sidebar = () => {
|
|
return (
|
|
<div className="flex min-h-[calc(100dvh-80px)] flex-col gap-y-10 overflow-y-auto bg-white p-5">
|
|
{MENU.map(({ group, items }) => (
|
|
<div className="flex flex-col">
|
|
<div
|
|
key={group}
|
|
className="px-5 pb-4 text-[#4C5CA0]/50 uppercase"
|
|
>
|
|
{group}
|
|
</div>
|
|
{items.map(({ title, url, icon: Icon }) => (
|
|
<NavLink
|
|
to={url}
|
|
key={`${group}-${title}`}
|
|
className={({ isActive }) =>
|
|
twMerge(
|
|
isActive ? 'bg-[#707FDD]/10 font-bold' : '',
|
|
'group/menu flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all hover:bg-[#707FDD]/10',
|
|
)
|
|
}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
<Icon
|
|
className={twMerge(
|
|
isActive ? 'text-[#5363AB]' : 'text-[#A6ABC8]',
|
|
'h-[18px] w-[18px] transition-all group-hover/menu:text-[#5363AB]',
|
|
)}
|
|
/>
|
|
<span
|
|
className={twMerge(
|
|
isActive ? 'text-[#5363AB]' : 'text-[#273240]',
|
|
'transition-all group-hover/menu:text-[#5363AB]',
|
|
)}
|
|
>
|
|
{title}
|
|
</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|