9d4d3d9a8f
- Refactor DashboardPage to use StatCard, new Button variants, and glassmorphism cards - Update DashboardLayout to include AstralBackground for premium visual effect - Style GlobalPlayer with glass-hud utility classes - Fix type errors in LoginPage by using local Card shim
52 lines
2.1 KiB
TypeScript
52 lines
2.1 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';
|
|
import { AstralBackground } from '../ui/AstralBackground';
|
|
|
|
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">
|
|
<AstralBackground />
|
|
<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>
|
|
);
|
|
}
|