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

Compare commits

base: zen/core:066b1eac0aa4850d0d1874fa4c763618d869199b
Branches Tags
zen/core:main
..
compare: zen/core:e8d87b0a8f1293db35d5bc260b095ed529722657
Branches Tags
zen/core:main

2 Commits
066b1eac0a .. e8d87b0a8f

Author SHA1 Message Date
hykocx e8d87b0a8f style(admin): adjust sidebar nav item spacing and remove sub-item icons 2026-04-22 11:57:25 -04:00
hykocx 408653452c style(admin): add active parent style for expanded sidebar sections 2026-04-22 11:50:36 -04:00
1 changed files with 8 additions and 9 deletions
Expand all files Collapse all files
src/features/admin/components/AdminSidebar.js
+8 -9
View File
@@ -91,6 +91,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
const itemBase = 'w-full flex items-center justify-between px-[10px] py-[7px] rounded-lg text-[13px] font-normal transition-colors duration-[120ms] ease-out'; const itemBase = 'w-full flex items-center justify-between px-[10px] py-[7px] rounded-lg text-[13px] font-normal transition-colors duration-[120ms] ease-out';
const itemActive = 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white'; const itemActive = 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white';
const itemActiveParent = 'text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-900';
const itemInactive = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-900 hover:text-neutral-900 dark:hover:text-white'; const itemInactive = 'text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-900 hover:text-neutral-900 dark:hover:text-white';
const subItemBase = 'w-full flex items-center justify-between px-[10px] py-[7px] rounded-lg text-[12px] transition-colors duration-[120ms] ease-out'; const subItemBase = 'w-full flex items-center justify-between px-[10px] py-[7px] rounded-lg text-[12px] transition-colors duration-[120ms] ease-out';
@@ -107,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>
@@ -133,9 +134,9 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
} }
toggleSection(section.id); toggleSection(section.id);
}} }}
className={`cursor-pointer ${itemBase} ${isActive && isCollapsed ? itemActive : 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>
@@ -152,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>
@@ -161,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
@@ -169,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">
@@ -204,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>