feat: improve sidebar link styling with transition effects for better user experience
This commit is contained in:
parent
cf072255a0
commit
15f8dbb8e2
@ -17,10 +17,12 @@ export const Sidebar = () => {
|
|||||||
<Link
|
<Link
|
||||||
to={url}
|
to={url}
|
||||||
key={`${group}-${title}`}
|
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]" />
|
<Icon className="h-[18px] w-[18px] text-[#A6ABC8] transition-all group-hover/menu:text-[#5363AB]" />
|
||||||
<span className="group-hover/menu:text-[#5363AB]">{title}</span>
|
<span className="text-[#273240] transition-all group-hover/menu:text-[#5363AB]">
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user