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

This commit is contained in:
2026-04-22 12:10:22 -04:00
parent d8313cfeda
commit 836134f701
+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 itemActive = 'bg-neutral-100 dark:bg-neutral-900 text-black dark:text-white font-medium';
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 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 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 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 Icon = resolveIcon(section.icon);
@@ -106,7 +109,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
<Link
href={item.href}
onClick={handleMobileLinkClick}
className={`${itemBase} ${item.current ? itemActive : itemInactive}`}
className={`${parentBase} ${item.current ? parentActif : inactive}`}
>
<div className="flex items-center gap-2">
<Icon className="h-[15px] w-[15px] flex-shrink-0" />
@@ -134,7 +137,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
}
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">
<Icon className="h-[15px] w-[15px] flex-shrink-0" />
@@ -167,7 +170,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
<Link
href={item.href}
onClick={handleMobileLinkClick}
className={`${subItemBase} ${item.current ? itemActive : itemInactive}`}
className={`${subItemBase} ${item.current ? subItemActif : inactive}`}
>
<div className="flex items-center">
<span className="pl-[25px]">{item.name}</span>