0 && 'ml-3')}>
{hasChildren ? (
<>
{isOpen && (
{item.children?.map((child) => (
- setActiveMenu(child.id)}
- className={({ isActive }) =>
- cn(
- 'flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors',
- isActive
- ? 'bg-blue-600/20 text-blue-400'
- : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800'
- )
- }
- >
-
- {child.name}
-
+
))}
)}
@@ -243,15 +197,11 @@ function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number
to={item.path || '#'}
onClick={handleClick}
className={({ isActive }) =>
- cn(
- 'flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors',
- isActive
- ? 'bg-blue-600/20 text-blue-400'
- : 'text-slate-300 hover:text-slate-100 hover:bg-slate-800'
- )
+ cn('flex items-center gap-1.5 h-8 px-2.5 text-xs rounded-md transition-colors',
+ isActive ? 'bg-blue-600/20 text-blue-400' : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800')
}
>
-
+
{item.name}
)}
@@ -261,15 +211,8 @@ function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number
export function Sidebar() {
const { sidebarCollapsed, toggleSidebar } = useThemeStore();
-
return (
-