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

style(admin): add active parent style for expanded sidebar sections

Browse Source
This commit is contained in:
Hyko
2026-04-22 11:50:36 -04:00
parent 066b1eac0a
commit 408653452c
1 changed files with 2 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/AdminSidebar.js
+2 -1
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';
@@ -133,7 +134,7 @@ 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-3">
<Icon className="h-[15px] w-[15px] flex-shrink-0" /> <Icon className="h-[15px] w-[15px] flex-shrink-0" />