From cf072255a0aac961229af9177fd74da4a1ac332c Mon Sep 17 00:00:00 2001
From: Ardeman <are.theman@gmail.com>
Date: Sun, 23 Feb 2025 12:39:52 +0800
Subject: [PATCH] feat: enhance sidebar layout with improved styling and hover
 effects

---
 app/layouts/admin/sidebar.tsx | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

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