url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Menu Item to fix multi-line wrapping and spacing

Browse Source
This commit is contained in:
Tola Leng
2025-12-02 00:39:33 +07:00
parent e4e87abac5
commit 84916f705a
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/dashboard/sidebar/MenuItem.tsx
+6 -6
View File
@@ -39,17 +39,17 @@ export const MenuItem: React.FC<MenuItemProps> = ({
} }
}; };
const isActive = path && location.pathname === path; const isActive = path && location.pathname === path;
const mainIconSize = "h-6 w-6"; const mainIconSize = "h-5 w-5";
return <div className={` return <div className={`
${collapsed ? 'p-3' : 'p-2 pl-3'} ${collapsed ? 'p-3' : 'py-3 px-3'}
mb-1 rounded-lg mb-1 rounded-lg
${isActive ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} ${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' : ''} ${collapsed ? 'justify-center' : ''}
cursor-pointer cursor-pointer transition-colors
`} onClick={handleClick}> `} onClick={handleClick}>
<Icon className={`${mainIconSize} ${color}`} /> <Icon className={`${mainIconSize} flex-shrink-0 ${theme === 'dark' ? 'text-gray-400' : 'text-muted-foreground'}`} />
{!collapsed && <span className="ml-2.5 text-foreground tracking-wide text-[15px] font-normal"> {!collapsed && <span className="text-sidebar-foreground font-inter text-[14px] font-medium tracking-tight leading-tight whitespace-nowrap">
{t(translationKey)} {t(translationKey)}
</span>} </span>}
</div>; </div>;