31 lines
986 B
TypeScript
31 lines
986 B
TypeScript
import { Link } from 'react-router'
|
|
|
|
import { MENU } from './menu'
|
|
|
|
export const Sidebar = () => {
|
|
return (
|
|
<div className="flex flex-col gap-y-10 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 }) => (
|
|
<Link
|
|
to={url}
|
|
key={`${group}-${title}`}
|
|
className="group/menu hover:bg-opacity-10 flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 text-[#273240] hover:bg-[#707FDD]/10 hover:font-bold hover:text-[#5363AB]"
|
|
>
|
|
<Icon className="h-[18px] w-[18px] text-[#A6ABC8] group-hover/menu:text-[#5363AB]" />
|
|
<span className="group-hover/menu:text-[#5363AB]">{title}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|