fix(Sidebar): not shown on public route

src/components/layout/ClientLayout.tsx

@@ -6,9 +6,26 @@ import { Header } from "@/components/layout/Header";
 import { Sidebar } from "@/components/layout/Sidebar";
 import { InstallPWA } from "../ui/InstallPWA";
 import { Toaster } from "@/components/ui/toaster";
+import { usePathname, useRouter } from "next/navigation";
+import { authService } from "@/lib/services/auth.service";
+
+// Routes qui ne nécessitent pas d'authentification
+const publicRoutes = ["/login", "/register"];
 
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Vérification de l'authentification
+  useEffect(() => {
+    const isPublicRoute = publicRoutes.includes(pathname);
+    const isAuthenticated = authService.isAuthenticated();
+
+    if (!isAuthenticated && !isPublicRoute) {
+      router.push(`/login?from=${encodeURIComponent(pathname)}`);
+    }
+  }, [pathname, router]);
 
   // Gestionnaire pour fermer la barre latérale lors d'un clic en dehors
   useEffect(() => {
@@ -49,12 +66,15 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
     }
   }, []);
 
+  // Ne pas afficher le header et la sidebar sur les routes publiques
+  const isPublicRoute = publicRoutes.includes(pathname);
+
   return (
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <div className="relative min-h-screen">
-        <Header onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} />
+        {!isPublicRoute && <Header onToggleSidebar={() => setIsSidebarOpen(!isSidebarOpen)} />}
-        <Sidebar isOpen={isSidebarOpen} />
+        {!isPublicRoute && <Sidebar isOpen={isSidebarOpen} />}
-        <main className="container pt-4 md:pt-8">{children}</main>
+        <main className={`${!isPublicRoute ? "container pt-4 md:pt-8" : ""}`}>{children}</main>
         <InstallPWA />
         <Toaster />
       </div>

src/components/layout/Sidebar.tsx

@@ -17,26 +17,10 @@ export function Sidebar({ isOpen }: SidebarProps) {
   const [libraries, setLibraries] = useState<KomgaLibrary[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [isRefreshing, setIsRefreshing] = useState(false);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
 
   // Initialiser l'authentification au montage du composant
-  useEffect(() => {
-    const initAuth = () => {
-      const credentials = storageService.getCredentials();
-      const user = storageService.getUser();
-      console.log("Sidebar - Init Auth:", { hasCredentials: !!credentials, hasUser: !!user });
-      if (credentials && user) {
-        setIsAuthenticated(true);
-        return true;
-      }
-      return false;
-    };
-
-    initAuth();
-  }, []);
 
   const fetchLibraries = useCallback(async () => {
-    if (!isAuthenticated) return;
     setIsLoading(true);
     console.log("Sidebar - Fetching libraries...");
     try {
@@ -54,11 +38,11 @@ export function Sidebar({ isOpen }: SidebarProps) {
       setIsLoading(false);
       setIsRefreshing(false);
     }
-  }, [isAuthenticated]);
+  }, []);
 
   useEffect(() => {
     fetchLibraries();
-  }, [isAuthenticated, pathname, fetchLibraries]);
+  }, [pathname, fetchLibraries]);
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
@@ -68,8 +52,7 @@ export function Sidebar({ isOpen }: SidebarProps) {
   const handleLogout = () => {
     console.log("Sidebar - Logging out");
     authService.logout();
-    storageService.clearAll(); // Nettoyer tout le stockage
+    storageService.clearAll();
-    setIsAuthenticated(false);
     setLibraries([]);
     router.push("/login");
   };
@@ -112,8 +95,6 @@ export function Sidebar({ isOpen }: SidebarProps) {
           </div>
         </div>
 
-        {isAuthenticated && (
-          <>
         <div className="px-3 py-2">
           <div className="space-y-1">
             <div className="mb-2 px-4 flex items-center justify-between">
@@ -164,11 +145,8 @@ export function Sidebar({ isOpen }: SidebarProps) {
             </Link>
           </div>
         </div>
-          </>
-        )}
       </div>
 
-      {isAuthenticated && (
       <div className="p-3 border-t border-border/40">
         <button
           onClick={handleLogout}
@@ -178,7 +156,6 @@ export function Sidebar({ isOpen }: SidebarProps) {
           Se déconnecter
         </button>
       </div>
-      )}
     </aside>
   );
 }