feat: Initial commit - Base application with Next.js - Configuration, Auth, Library navigation, CBZ/CBR reader, Cache, Responsive design

src/components/layout/ClientLayout.tsx

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

src/components/layout/Header.tsx

@@ -0,0 +1,48 @@
+import { Menu, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+interface HeaderProps {
+  onToggleSidebar: () => void;
+}
+
+export function Header({ onToggleSidebar }: HeaderProps) {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="container flex h-14 max-w-screen-2xl items-center">
+        <button
+          onClick={onToggleSidebar}
+          className="mr-2 px-2 hover:bg-accent hover:text-accent-foreground rounded-md"
+          aria-label="Toggle sidebar"
+        >
+          <Menu className="h-5 w-5" />
+        </button>
+
+        <div className="mr-4 hidden md:flex">
+          <a className="mr-6 flex items-center space-x-2" href="/">
+            <span className="hidden font-bold sm:inline-block">Paniels</span>
+          </a>
+        </div>
+
+        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+          <nav className="flex items-center">
+            <button
+              onClick={toggleTheme}
+              className="px-2 py-1.5 hover:bg-accent hover:text-accent-foreground rounded-md"
+              aria-label="Toggle theme"
+            >
+              <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+              <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+              <span className="sr-only">Toggle theme</span>
+            </button>
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,76 @@
+import { BookOpen, Home, Library, Settings } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+interface SidebarProps {
+  isOpen: boolean;
+}
+
+export function Sidebar({ isOpen }: SidebarProps) {
+  const pathname = usePathname();
+
+  const navigation = [
+    {
+      name: "Accueil",
+      href: "/",
+      icon: Home,
+    },
+    {
+      name: "Bibliothèques",
+      href: "/libraries",
+      icon: Library,
+    },
+    {
+      name: "Collections",
+      href: "/collections",
+      icon: BookOpen,
+    },
+  ];
+
+  return (
+    <aside
+      className={cn(
+        "fixed left-0 top-14 z-30 h-[calc(100vh-3.5rem)] w-64 border-r border-border/40 bg-background transition-transform duration-300 ease-in-out",
+        isOpen ? "translate-x-0" : "-translate-x-full"
+      )}
+    >
+      <div className="space-y-4 py-4">
+        <div className="px-3 py-2">
+          <div className="space-y-1">
+            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Navigation</h2>
+            {navigation.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                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"
+                )}
+              >
+                <item.icon className="mr-2 h-4 w-4" />
+                {item.name}
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        <div className="px-3 py-2">
+          <div className="space-y-1">
+            <h2 className="mb-2 px-4 text-lg font-semibold tracking-tight">Configuration</h2>
+            <Link
+              href="/settings"
+              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"
+              )}
+            >
+              <Settings className="mr-2 h-4 w-4" />
+              Préférences
+            </Link>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}