refactor(admin): rename sidebar CSS class variables for clarity
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user