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

refactor(admin): rename sidebar CSS class variables for clarity

Browse Source
This commit is contained in:
Hyko
2026-04-22 12:10:22 -04:00
parent d8313cfeda
commit 836134f701
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/components/AdminSidebar.js
+11 -8
View File
@@ -89,12 +89,15 @@ 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 base = '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 font-medium'; const inactive = '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 itemActiveParent = 'text-black font-medium 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 subItemBase = 'w-full flex items-center justify-between px-[10px] py-[7px] rounded-lg text-[13px] font-medium transition-colors duration-[120ms] ease-out'; const parentBase = `${base}`;
const parentActif = 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white font-medium';
const parentActifOuvert = 'text-black dark:text-white font-medium hover:bg-neutral-100 dark:hover:bg-neutral-900';
const subItemBase = base;
const subItemActif = 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white font-medium';
const renderNavSection = (section) => { const renderNavSection = (section) => {
const Icon = resolveIcon(section.icon); const Icon = resolveIcon(section.icon);
@@ -106,7 +109,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
<Link <Link
href={item.href} href={item.href}
onClick={handleMobileLinkClick} onClick={handleMobileLinkClick}
className={`${itemBase} ${item.current ? itemActive : itemInactive}`} className={`${parentBase} ${item.current ? parentActif : inactive}`}
> >
<div className="flex items-center gap-2"> <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" />
@@ -134,7 +137,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
} }
toggleSection(section.id); toggleSection(section.id);
}} }}
className={`cursor-pointer ${itemBase} ${isActive && isCollapsed ? itemActive : isActive ? itemActiveParent : itemInactive}`} className={`cursor-pointer ${parentBase} ${isActive && isCollapsed ? parentActif : isActive ? parentActifOuvert : inactive}`}
> >
<div className="flex items-center gap-2"> <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" />
@@ -167,7 +170,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
<Link <Link
href={item.href} href={item.href}
onClick={handleMobileLinkClick} onClick={handleMobileLinkClick}
className={`${subItemBase} ${item.current ? itemActive : itemInactive}`} className={`${subItemBase} ${item.current ? subItemActif : inactive}`}
> >
<div className="flex items-center"> <div className="flex items-center">
<span className="pl-[25px]">{item.name}</span> <span className="pl-[25px]">{item.name}</span>