legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: enhance sidebar layout with improved styling and hover effects

Browse Source
This commit is contained in:
Ardeman 2025-02-23 12:39:52 +08:00
parent 48ac1d6f4d
commit cf072255a0
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/layouts/admin/sidebar.tsx
View File

@ -4,21 +4,26 @@ import { MENU } from './menu'
export const Sidebar = () => {
return (
<div>
<div className="flex flex-col gap-y-10 p-5">
{MENU.map(({ group, items }) => (
<>
<div key={group}>{group}</div>
<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="flex items-center gap-x-3 text-[#273240]"
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]" />
<span>{title}</span>
<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>
)