From 84916f705adc83fefec400c42dbd018f7aef81af Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 2 Dec 2025 00:39:33 +0700
Subject: [PATCH] Refactor Menu Item to fix multi-line wrapping and spacing

---
 .../src/components/dashboard/sidebar/MenuItem.tsx    | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/application/src/components/dashboard/sidebar/MenuItem.tsx b/application/src/components/dashboard/sidebar/MenuItem.tsx
index 2953f97..9d47d88 100644
--- a/application/src/components/dashboard/sidebar/MenuItem.tsx
+++ b/application/src/components/dashboard/sidebar/MenuItem.tsx
@@ -39,17 +39,17 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     }
   };
   const isActive = path && location.pathname === path;
-  const mainIconSize = "h-6 w-6";
+  const mainIconSize = "h-5 w-5";
   return <div className={`
-        ${collapsed ? 'p-3' : 'p-2 pl-3'} 
+        ${collapsed ? 'p-3' : 'py-3 px-3'} 
         mb-1 rounded-lg 
         ${isActive ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} 
-        flex items-center 
+        flex items-center gap-3
         ${collapsed ? 'justify-center' : ''} 
-        cursor-pointer
+        cursor-pointer transition-colors
       `} onClick={handleClick}>
-      <Icon className={`${mainIconSize} ${color}`} />
-      {!collapsed && <span className="ml-2.5 text-foreground tracking-wide text-[15px] font-normal">
+      <Icon className={`${mainIconSize} flex-shrink-0 ${theme === 'dark' ? 'text-gray-400' : 'text-muted-foreground'}`} />
+      {!collapsed && <span className="text-sidebar-foreground font-inter text-[14px] font-medium tracking-tight leading-tight whitespace-nowrap">
           {t(translationKey)}
         </span>}
     </div>;