From 08f6e6a26426bc7465405c12055d2a09e5bfcb72 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Fri, 14 Feb 2025 13:37:19 +0100
Subject: [PATCH] feat: close sidebar on item clik

---
 src/components/layout/ClientLayout.tsx | 14 +++++++++++---
 src/components/layout/Sidebar.tsx      | 12 +++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/ClientLayout.tsx b/src/components/layout/ClientLayout.tsx
index 3cbf9e8..593db05 100644
--- a/src/components/layout/ClientLayout.tsx
+++ b/src/components/layout/ClientLayout.tsx
@@ -27,6 +27,14 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
     }
   }, [pathname, router]);
 
+  const handleCloseSidebar = () => {
+    setIsSidebarOpen(false);
+  };
+
+  const handleToggleSidebar = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
   // Gestionnaire pour fermer la barre latérale lors d'un clic en dehors
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -39,7 +47,7 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
         toggleButton &&
         !toggleButton.contains(event.target as Node)
       ) {
-        setIsSidebarOpen(false);
+        handleCloseSidebar();
       }
     };
 
@@ -72,8 +80,8 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <div className="relative min-h-screen">
-        {!isPublicRoute && <Header onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} />}
-        {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} />}
+        {!isPublicRoute && <Header onToggleSidebar={handleToggleSidebar} />}
+        {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} onClose={handleCloseSidebar} />}
         <main className={`${!isPublicRoute ? "container pt-4 md:pt-8" : ""}`}>{children}</main>
         <InstallPWA />
         <Toaster />
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 180ad7c..598c013 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -10,9 +10,10 @@ import { FavoriteService } from "@/lib/services/favorite.service";
 
 interface SidebarProps {
   isOpen: boolean;
+  onClose: () => void;
 }
 
-export function Sidebar({ isOpen }: SidebarProps) {
+export function Sidebar({ isOpen, onClose }: SidebarProps) {
   const pathname = usePathname();
   const router = useRouter();
   const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
@@ -101,9 +102,14 @@ export function Sidebar({ isOpen }: SidebarProps) {
     storageService.clearAll();
     setLibraries([]);
     setFavorites([]);
+    onClose();
     router.push("/login");
   };
 
+  const handleLinkClick = () => {
+    onClose();
+  };
+
   const navigation = [
     {
       name: "Accueil",
@@ -130,6 +136,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
               <Link
                 key={item.href}
                 href={item.href}
+                onClick={handleLinkClick}
                 className={cn(
                   "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
                   pathname === item.href ? "bg-accent" : "transparent"
@@ -157,6 +164,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
                 <Link
                   key={series.id}
                   href={`/series/${series.id}`}
+                  onClick={handleLinkClick}
                   className={cn(
                     "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
                     pathname === `/series/${series.id}` ? "bg-accent" : "transparent"
@@ -192,6 +200,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
                 <Link
                   key={library.id}
                   href={`/libraries/${library.id}`}
+                  onClick={handleLinkClick}
                   className={cn(
                     "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
                     pathname === `/libraries/${library.id}` ? "bg-accent" : "transparent"
@@ -210,6 +219,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
             <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>
             <Link
               href="/settings"
+              onClick={handleLinkClick}
               className={cn(
                 "flex items-center rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground",
                 pathname === "/settings" ? "bg-accent" : "transparent"