From 15f8dbb8e21efe97ad2ff52c323a7606c9ecc018 Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 23 Feb 2025 12:42:17 +0800
Subject: [PATCH] feat: improve sidebar link styling with transition effects
 for better user experience

---
 app/layouts/admin/sidebar.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/layouts/admin/sidebar.tsx b/app/layouts/admin/sidebar.tsx
index 654318c..a43dda2 100644
--- a/app/layouts/admin/sidebar.tsx
+++ b/app/layouts/admin/sidebar.tsx
@@ -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>