zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Hyko
2026-04-22 11:57:25 -04:00
parent 408653452c
commit e8d87b0a8f
1 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/AdminSidebar.js
+6 -8
View File
@@ -108,7 +108,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
onClick={handleMobileLinkClick} onClick={handleMobileLinkClick}
className={`${itemBase} ${item.current ? itemActive : itemInactive}`} 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" /> <Icon className="h-[15px] w-[15px] flex-shrink-0" />
<span>{section.title}</span> <span>{section.title}</span>
</div> </div>
@@ -136,7 +136,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
}} }}
className={`cursor-pointer ${itemBase} ${isActive && isCollapsed ? itemActive : isActive ? itemActiveParent : itemInactive}`} 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" /> <Icon className="h-[15px] w-[15px] flex-shrink-0" />
<span>{section.title}</span> <span>{section.title}</span>
</div> </div>
@@ -153,7 +153,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
: 'max-h-[1000px] opacity-100' : '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)} {section.items.map(renderNavItem)}
</ul> </ul>
</div> </div>
@@ -162,7 +162,6 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
}; };
const renderNavItem = (item) => { const renderNavItem = (item) => {
const Icon = resolveIcon(item.icon);
return ( return (
<li key={item.name}> <li key={item.name}>
<Link <Link
@@ -170,9 +169,8 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
onClick={handleMobileLinkClick} onClick={handleMobileLinkClick}
className={`${subItemBase} ${item.current ? itemActive : itemInactive}`} className={`${subItemBase} ${item.current ? itemActive : itemInactive}`}
> >
<div className="flex items-center gap-3"> <div className="flex items-center">
<Icon className="h-[15px] w-[15px] flex-shrink-0" /> <span className="pl-[27px]">{item.name}</span>
{item.name}
</div> </div>
{item.badge && ( {item.badge && (
<span className="bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-lg font-medium"> <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> </Link>
{/* Navigation */} {/* 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)} {navigationSections.map(renderNavSection)}
</nav> </nav>
</div> </div>