46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "next-themes";
|
|
import { useState, useEffect } from "react";
|
|
import { Header } from "@/components/layout/Header";
|
|
import { Sidebar } from "@/components/layout/Sidebar";
|
|
|
|
export default function ClientLayout({ children }: { children: React.ReactNode }) {
|
|
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
|
|
|
|
// Gestionnaire pour fermer la barre latérale lors d'un clic en dehors
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
const sidebar = document.getElementById("sidebar");
|
|
const toggleButton = document.getElementById("sidebar-toggle");
|
|
|
|
if (
|
|
sidebar &&
|
|
!sidebar.contains(event.target as Node) &&
|
|
toggleButton &&
|
|
!toggleButton.contains(event.target as Node)
|
|
) {
|
|
setIsSidebarOpen(false);
|
|
}
|
|
};
|
|
|
|
if (isSidebarOpen) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [isSidebarOpen]);
|
|
|
|
return (
|
|
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
|
|
<div className="relative min-h-screen">
|
|
<Header onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} />
|
|
<Sidebar isOpen={isSidebarOpen} />
|
|
<main className="container pt-4 md:pt-8">{children}</main>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|