feat: Fermeture automatique de la barre latérale au clic en dehors - Ajout d'un gestionnaire de clic en dehors dans ClientLayout - Ajout des identifiants sur la sidebar et le bouton toggle

src/components/layout/ClientLayout.tsx

@@ -1,13 +1,38 @@
 "use client";
 
 import { ThemeProvider } from "next-themes";
-import { useState } from "react";
+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">

src/components/layout/Header.tsx

@@ -19,6 +19,7 @@ export function Header({ onToggleSidebar }: HeaderProps) {
           onClick={onToggleSidebar}
           className="mr-2 px-2 hover:bg-accent hover:text-accent-foreground rounded-md"
           aria-label="Toggle sidebar"
+          id="sidebar-toggle"
         >
           <Menu className="h-5 w-5" />
         </button>

src/components/layout/Sidebar.tsx

@@ -56,6 +56,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
         "transition-transform duration-300 ease-in-out flex flex-col",
         isOpen ? "translate-x-0" : "-translate-x-full"
       )}
+      id="sidebar"
     >
       <div className="flex-1 space-y-4 py-4 overflow-y-auto">
         <div className="px-3 py-2">