From 5b9a8fdb6ebf512270ca8060a6e32f09ca9266db Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 12 Feb 2025 13:15:06 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Fermeture=20automatique=20de=20la=20bar?=
 =?UTF-8?q?re=20lat=C3=A9rale=20au=20clic=20en=20dehors=20-=20Ajout=20d'un?=
 =?UTF-8?q?=20gestionnaire=20de=20clic=20en=20dehors=20dans=20ClientLayout?=
 =?UTF-8?q?=20-=20Ajout=20des=20identifiants=20sur=20la=20sidebar=20et=20l?=
 =?UTF-8?q?e=20bouton=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/ClientLayout.tsx | 27 +++++++++++++++++++++++++-
 src/components/layout/Header.tsx       |  1 +
 src/components/layout/Sidebar.tsx      |  1 +
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index fb63a3b..1580ca6 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/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">
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 8f961f6..26daaa1 100644
--- a/src/components/layout/Header.tsx
+++ b/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>
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 92eaae7..971300f 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/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">