style(admin): adjust sidebar nav item spacing and remove sub-item icons

This commit is contained in:
2026-04-22 11:57:25 -04:00
parent 408653452c
commit e8d87b0a8f
@@ -108,7 +108,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
onClick={handleMobileLinkClick}
className={`${itemBase} ${item.current ? itemActive : itemInactive}`}
>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<Icon className="h-[15px] w-[15px] flex-shrink-0" />
<span>{section.title}</span>
</div>
@@ -136,7 +136,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
}}
className={`cursor-pointer ${itemBase} ${isActive && isCollapsed ? itemActive : isActive ? itemActiveParent : itemInactive}`}
>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<Icon className="h-[15px] w-[15px] flex-shrink-0" />
<span>{section.title}</span>
</div>
@@ -153,7 +153,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
: 'max-h-[1000px] opacity-100'
}`}
>
<ul className="flex flex-col gap-0.5 pt-0.5 pl-3">
<ul className="flex flex-col gap-0.5 pt-0.5">
{section.items.map(renderNavItem)}
</ul>
</div>
@@ -162,7 +162,6 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
};
const renderNavItem = (item) => {
const Icon = resolveIcon(item.icon);
return (
<li key={item.name}>
<Link
@@ -170,9 +169,8 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
onClick={handleMobileLinkClick}
className={`${subItemBase} ${item.current ? itemActive : itemInactive}`}
>
<div className="flex items-center gap-3">
<Icon className="h-[15px] w-[15px] flex-shrink-0" />
{item.name}
<div className="flex items-center">
<span className="pl-[27px]">{item.name}</span>
</div>
{item.badge && (
<span className="bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-lg font-medium">
@@ -205,7 +203,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
</Link>
{/* Navigation */}
<nav className="flex-1 px-2 py-2 overflow-y-auto flex flex-col gap-0.5 pb-12">
<nav className="flex-1 px-2 py-2 overflow-y-auto flex flex-col pb-12">
{navigationSections.map(renderNavSection)}
</nav>
</div>