fix(sidebar): largeur w-80 fixe (était w-72 sous 1024px) + spacing prototype
- w-72 lg:w-80 → w-80 (32px de plus sous 1024px, aligné prototype) - py-4 → py-5 (rail plus aéré) - gap-3 → gap-[18px] (logo→nav) - gap-1.5 → gap-2 (boutons nav) - mb-1 → mb-2 (logo) - w-[3px] → w-1 (indicateur actif plus visible)
This commit is contained in:
@@ -1159,7 +1159,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
|
|||||||
className={cn(
|
className={cn(
|
||||||
// Mobile: fixed overlay, slide in/out
|
// Mobile: fixed overlay, slide in/out
|
||||||
'fixed inset-y-0 start-0 z-[70] md:relative md:z-auto',
|
'fixed inset-y-0 start-0 z-[70] md:relative md:z-auto',
|
||||||
'h-full min-h-0 w-72 lg:w-80 shrink-0 flex flex-row overflow-hidden',
|
'h-full min-h-0 w-80 shrink-0 flex flex-row overflow-hidden',
|
||||||
'transition-transform duration-300 ease-in-out',
|
'transition-transform duration-300 ease-in-out',
|
||||||
isMobileOpen ? 'translate-x-0 shadow-2xl' : '-translate-x-full md:translate-x-0',
|
isMobileOpen ? 'translate-x-0 shadow-2xl' : '-translate-x-full md:translate-x-0',
|
||||||
'border-e border-border/40 bg-white/95 md:bg-white/30 backdrop-blur-md sidebar-shadow dark:border-white/6 dark:bg-[#151515] dark:backdrop-blur-none',
|
'border-e border-border/40 bg-white/95 md:bg-white/30 backdrop-blur-md sidebar-shadow dark:border-white/6 dark:bg-[#151515] dark:backdrop-blur-none',
|
||||||
@@ -1167,14 +1167,14 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{/* ── Column 1 : Rail d'icônes (54px) — inspiré du prototype ── */}
|
{/* ── Column 1 : Rail d'icônes (54px) — inspiré du prototype ── */}
|
||||||
<div className="w-[54px] border-e border-border/40 bg-[#FAF9F5] dark:bg-[#0E0E0E] flex flex-col items-center justify-between py-4 shrink-0 select-none">
|
<div className="w-[54px] border-e border-border/40 bg-[#FAF9F5] dark:bg-[#0E0E0E] flex flex-col items-center justify-between py-5 shrink-0 select-none">
|
||||||
|
|
||||||
{/* Top : Logo + navigation */}
|
{/* Top : Logo + navigation */}
|
||||||
<div className="flex flex-col items-center gap-3 w-full">
|
<div className="flex flex-col items-center gap-[18px] w-full">
|
||||||
{/* Logo avec dropdown profil */}
|
{/* Logo avec dropdown profil */}
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<div className="w-9 h-9 bg-brand-accent hover:rotate-6 active:scale-95 flex items-center justify-center rounded-xl shadow-md transition-all cursor-pointer mb-1">
|
<div className="w-9 h-9 bg-brand-accent hover:rotate-6 active:scale-95 flex items-center justify-center rounded-xl shadow-md transition-all cursor-pointer mb-2">
|
||||||
<span className="text-white font-serif font-bold text-sm">M</span>
|
<span className="text-white font-serif font-bold text-sm">M</span>
|
||||||
</div>
|
</div>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
@@ -1205,7 +1205,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
|
|||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
|
||||||
{/* Boutons de navigation principaux */}
|
{/* Boutons de navigation principaux */}
|
||||||
<div className="flex flex-col gap-1.5 w-full px-1.5">
|
<div className="flex flex-col gap-2 w-full px-1.5">
|
||||||
{([
|
{([
|
||||||
{
|
{
|
||||||
id: 'notebooks',
|
id: 'notebooks',
|
||||||
@@ -1269,7 +1269,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{item.isActive && (
|
{item.isActive && (
|
||||||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-4 bg-brand-accent rounded-r-full" />
|
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-brand-accent rounded-r-full" />
|
||||||
)}
|
)}
|
||||||
<item.icon size={16} />
|
<item.icon size={16} />
|
||||||
<span
|
<span
|
||||||
@@ -1351,7 +1351,7 @@ export function Sidebar({ className, user }: { className?: string; user?: any })
|
|||||||
: 'text-concrete hover:text-ink dark:hover:text-white hover:bg-black/[0.04] dark:hover:bg-white/[0.04]'
|
: 'text-concrete hover:text-ink dark:hover:text-white hover:bg-black/[0.04] dark:hover:bg-white/[0.04]'
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{pathname.startsWith('/settings') && <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-4 bg-brand-accent rounded-r-full" />}
|
{pathname.startsWith('/settings') && <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-brand-accent rounded-r-full" />}
|
||||||
<Settings size={15} />
|
<Settings size={15} />
|
||||||
<span className="absolute left-[50px] top-1/2 -translate-y-1/2 bg-ink dark:bg-white dark:text-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
|
<span className="absolute left-[50px] top-1/2 -translate-y-1/2 bg-ink dark:bg-white dark:text-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
|
||||||
{t('nav.settings')}
|
{t('nav.settings')}
|
||||||
|
|||||||
Reference in New Issue
Block a user