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

feat: improve sidebar link styling with transition effects for better user experience

Browse Source
This commit is contained in:
Ardeman 2025-02-23 12:42:17 +08:00
parent cf072255a0
commit 15f8dbb8e2
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,10 +17,12 @@ export const Sidebar = () => {
<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]"
className="group/menu hover:bg-opacity-10 flex h-[42px] w-[200px] items-center gap-x-3 rounded-md px-5 transition-all 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>
<Icon className="h-[18px] w-[18px] text-[#A6ABC8] transition-all group-hover/menu:text-[#5363AB]" />
<span className="text-[#273240] transition-all group-hover/menu:text-[#5363AB]">
{title}
</span>
</Link>
))}
</div>