881bfcbe65
- Ajouter margin-left au contenu principal pour compenser la sidebar fixe - Margin dynamique basé sur l'état ouvert/fermé de la sidebar - Augmenter z-index du dropdown de recherche à z-[110] pour être au-dessus du header (z-100) - Ajouter z-index au wrapper de recherche dans Header - Le contenu principal ne se superpose plus avec la sidebar - Le dropdown de recherche s'affiche correctement au-dessus de tous les éléments
50 lines
2 KiB
TypeScript
50 lines
2 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { Header } from './Header';
|
|
import { Sidebar } from './Sidebar';
|
|
import { GlobalPlayer } from '@/features/player/components/GlobalPlayer';
|
|
import { useUIStore } from '@/stores/ui';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface DashboardLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Layout principal du dashboard avec sidebar et header.
|
|
* Utilise une structure flex avec sidebar fixe et contenu scrollable.
|
|
*
|
|
* FIX: La sidebar est fixe (fixed left-6), donc le contenu principal doit avoir
|
|
* un margin-left pour ne pas être masqué par la sidebar.
|
|
*/
|
|
export function DashboardLayout({ children }: DashboardLayoutProps) {
|
|
const { sidebarOpen } = useUIStore();
|
|
|
|
// FIX: Calculer le margin-left pour compenser la sidebar fixe
|
|
// Sidebar: left-6 (24px) + width (w-64 = 256px quand ouverte, w-20 = 80px quand fermée) + gap (24px)
|
|
// Sur desktop (lg): sidebar est toujours visible, donc toujours besoin de margin
|
|
// Sur mobile: sidebar est cachée (-translate-x-full), donc pas de margin
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden relative">
|
|
<Sidebar />
|
|
{/* FIX: Ajouter margin-left pour compenser la sidebar fixe et éviter la superposition */}
|
|
<div
|
|
className={cn(
|
|
'flex-1 flex flex-col min-w-0 transition-all duration-500 ease-in-out',
|
|
// Sur desktop (lg), toujours ajouter le margin pour la sidebar
|
|
// Sidebar ouverte: left-6 (24px) + w-64 (256px) + gap (24px) = 304px
|
|
// Sidebar fermée: left-6 (24px) + w-20 (80px) + gap (24px) = 128px
|
|
sidebarOpen
|
|
? 'lg:ml-[304px]' // 24 + 256 + 24 = 304px
|
|
: 'lg:ml-[128px]', // 24 + 80 + 24 = 128px
|
|
// Sur mobile, pas de margin car sidebar est cachée (-translate-x-full)
|
|
)}
|
|
>
|
|
<Header />
|
|
{/* FIX: Ajouter padding-top pour compenser le header fixe (h-16 + mt-4 = 80px = top-20) */}
|
|
<main className="flex-1 overflow-auto pb-24 pt-20 relative z-0">{children}</main>
|
|
<GlobalPlayer />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|