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

style(admin): update sidebar width to 240px and refine nav item styles

Browse Source
This commit is contained in:
Hyko
2026-04-22 12:05:46 -04:00
parent 1a46254221
commit 384eadf7b7
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/DESIGN.md
+2 -2
View File
@@ -123,7 +123,7 @@ Les ombres existent uniquement pour les éléments qui **flottent au-dessus** de
``` ```
┌─────────────────────────────────────────────┐ ┌─────────────────────────────────────────────┐
│ Sidebar 220px │ Barre supérieure 48px │ │ Sidebar 240px │ Barre supérieure 48px │
│ ├─────────────────────────── │ │ ├─────────────────────────── │
│ Logo │ │ │ Logo │ │
│ │ Zone de contenu │ │ │ Zone de contenu │
@@ -134,7 +134,7 @@ Les ombres existent uniquement pour les éléments qui **flottent au-dessus** de
└─────────────────────────────────────────────┘ └─────────────────────────────────────────────┘
``` ```
- **Sidebar** : fixe, 220px. Fond blanc (`#ffffff`). Séparée par une bordure droite. - **Sidebar** : fixe, 240px. Fond blanc (`#ffffff`). Séparée par une bordure droite.
- **Barre supérieure** : fixe, 48px. Fond blanc. Fil d'Ariane à gauche, utilisateur à droite. - **Barre supérieure** : fixe, 48px. Fond blanc. Fil d'Ariane à gauche, utilisateur à droite.
- **Contenu** : gris très pâle (`#fafafa` / `neutral-50`). Les cartes et tableaux ont un fond blanc, ce qui crée naturellement la séparation visuelle sans avoir besoin de bordures de section. - **Contenu** : gris très pâle (`#fafafa` / `neutral-50`). Les cartes et tableaux ont un fond blanc, ce qui crée naturellement la séparation visuelle sans avoir besoin de bordures de section.
src/features/admin/components/AdminSidebar.js
+6 -6
View File
@@ -90,11 +90,11 @@ 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 font-medium';
const itemActiveParent = 'text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-900'; 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 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-[13px] font-medium transition-colors duration-[120ms] ease-out';
const renderNavSection = (section) => { const renderNavSection = (section) => {
const Icon = resolveIcon(section.icon); const Icon = resolveIcon(section.icon);
@@ -153,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"> <ul className="flex flex-col">
{section.items.map(renderNavItem)} {section.items.map(renderNavItem)}
</ul> </ul>
</div> </div>
@@ -170,7 +170,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
className={`${subItemBase} ${item.current ? itemActive : itemInactive}`} className={`${subItemBase} ${item.current ? itemActive : itemInactive}`}
> >
<div className="flex items-center"> <div className="flex items-center">
<span className="pl-[27px]">{item.name}</span> <span className="pl-[25px]">{item.name}</span>
</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">
@@ -195,7 +195,7 @@ const AdminSidebar = ({ isMobileMenuOpen, setIsMobileMenuOpen, appName, enabledM
{/* Sidebar */} {/* Sidebar */}
<div className={` <div className={`
${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'} ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
fixed lg:static inset-y-0 left-0 z-40 w-[220px] bg-white dark:bg-black border-r border-neutral-200 dark:border-neutral-800/70 flex flex-col h-screen transition-transform duration-[120ms] ease-out fixed lg:static inset-y-0 left-0 z-40 w-[240px] bg-white dark:bg-black border-r border-neutral-200 dark:border-neutral-800/70 flex flex-col h-screen transition-transform duration-[120ms] ease-out
`}> `}>
{/* Logo */} {/* Logo */}
<Link href="/admin" className="px-4 h-12 flex items-center justify-start gap-2 border-b border-neutral-200 dark:border-neutral-800/70"> <Link href="/admin" className="px-4 h-12 flex items-center justify-start gap-2 border-b border-neutral-200 dark:border-neutral-800/70">