Athlonix · Jayllyz · Jun 8, 2024 · Jun 8, 2024 · Jun 8, 2024 · Jun 8, 2024
diff --git a/apps/admin/app/(dashboard)/layout.tsx b/apps/admin/app/(dashboard)/layout.tsx
@@ -1,5 +1,6 @@
 import '@repo/ui/globals.css';
 import CollapsedNav from '@/app/ui/CollapsedNav';
+import { ModeToggle } from '@repo/ui/components/toggleTheme';
 import { cn } from '@repo/ui/lib/utils';
 import { File, Flame, Home, Landmark, LineChart, Package, Users } from 'lucide-react';
 import type { Metadata } from 'next';
@@ -22,7 +23,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }): JSX.Element {
   return (
-    <html lang="en">
+    <html lang="fr">
       <body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
         <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
           <div className="hidden border-r bg-muted/40 md:block">
@@ -125,6 +126,9 @@ export default function RootLayout({
           </div>
           <div className="flex flex-col h-full">
             <header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+              <div className="ml-auto">
+                <ModeToggle />
+              </div>
               <CollapsedNav />
             </header>
             {children}

diff --git a/apps/admin/app/layout.tsx b/apps/admin/app/layout.tsx
@@ -1,3 +1,4 @@
+import { ThemeProvider } from '@repo/ui/components/themes';
 import { Toaster } from '@repo/ui/components/ui/sonner';
 import '@repo/ui/globals.css';
 import { cn } from '@repo/ui/lib/utils';
@@ -22,7 +23,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={cn('min-h-screen bg-background font-sans antialiased', fontSans.variable)}>
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
         <Toaster richColors closeButton visibleToasts={1} />
       </body>
     </html>

diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -17,6 +17,7 @@
     "date-fns": "^3.6.0",
     "lucide-react": "^0.390.0",
     "next": "^14.2.3",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.5",

diff --git a/apps/api/package.json b/apps/api/package.json
@@ -32,7 +32,7 @@
     "@types/node": "^20.14.2",
     "@types/swagger-ui-dist": "^3.30.4",
     "supabase": "^1.172.2",
-    "tsx": "^4.13.3",
+    "tsx": "^4.14.0",
     "typescript": "^5.4.5",
     "vitest": "^1.6.0"
   }

diff --git a/apps/client/app/layout.tsx b/apps/client/app/layout.tsx
@@ -1,3 +1,4 @@
+import { ThemeProvider } from '@repo/ui/components/themes';
 import { Toaster } from '@repo/ui/components/ui/sonner';
 import '@repo/ui/globals.css';
 import { cn } from '@repo/ui/lib/utils';
@@ -20,11 +21,13 @@ export default function RootLayout({
   children: React.ReactNode;
 }): JSX.Element {
   return (
-    <html lang="en">
+    <html lang="fr">
       <body
         className={cn('min-h-screen bg-background font-sans antialiased flex flex-col items-center', fontSans.variable)}
       >
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
+          {children}
+        </ThemeProvider>
         <Toaster richColors closeButton visibleToasts={1} />
       </body>
     </html>

diff --git a/apps/client/app/lib/utils.ts b/apps/client/app/lib/utils.ts
@@ -61,6 +61,11 @@ export async function saveUserCookie(user: User, token?: string): Promise<void>
   }
 }
 
+export async function deleteUserCookie(): Promise<void> {
+  cookies().delete('user');
+  cookies().delete('access_token');
+}
+
 export async function updateUserInformation(
   id: number,
   username: string,

diff --git a/apps/client/app/ui/NavBar.tsx b/apps/client/app/ui/NavBar.tsx
@@ -1,8 +1,10 @@
 'use client';
 
-import { type User, checkSubscriptionStatus, getUserFromCookie } from '@/app/lib/utils';
+import { type User, checkSubscriptionStatus, deleteUserCookie, getUserFromCookie } from '@/app/lib/utils';
+import { ModeToggle } from '@repo/ui/components/toggleTheme';
 import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar';
 import { Button } from '@repo/ui/components/ui/button';
+import { LogOut } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
@@ -30,6 +32,7 @@ function LogoutUser() {
       response.json();
       if (response.status === 200) {
         localStorage.removeItem('user');
+        deleteUserCookie();
         window.location.href = '/';
       }
     })
@@ -74,15 +77,16 @@ export const NavBar: React.FC<NavBarProps> = ({ links }) => {
         </Link>
       </div>
       <div className="w-full flex items-center justify-between">
-        <ul className="flex gap-4">{navBarElements}</ul>
+        <ul className="flex gap-4 mr-2">{navBarElements}</ul>
         {!isAuthenticated ? (
-          <div>
-            <Button asChild className="w-[140px] mr-4">
+          <div className="flex items-center gap-2">
+            <Button asChild className="w-[120px]">
               <Link href="signup">Devenir membre</Link>
             </Button>
             <Button asChild className="w-[120px]">
               <Link href="login">Se connecter</Link>
             </Button>
+            <ModeToggle />
           </div>
         ) : (
           <div className="flex items-center gap-6">
@@ -96,11 +100,10 @@ export const NavBar: React.FC<NavBarProps> = ({ links }) => {
                 <Link href="/members">Espace membre</Link>
               </Button>
             )}
-            <Button className="w-[120px] bg-red-900">
-              <Link href={''} onClick={() => LogoutUser()}>
-                Se déconnecter
-              </Link>
-            </Button>
+            <Link href={''} onClick={() => LogoutUser()}>
+              <LogOut color="#bf0808" size={24} />
+            </Link>
+            <ModeToggle />
           </div>
         )}
       </div>

diff --git a/apps/client/package.json b/apps/client/package.json
@@ -16,6 +16,7 @@
     "@repo/ui": "workspace:*",
     "lucide-react": "^0.390.0",
     "next": "^14.2.3",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.51.5",

diff --git a/packages/ui/src/components/themes.tsx b/packages/ui/src/components/themes.tsx
@@ -0,0 +1,8 @@
+'use client';
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes';
+import type { ThemeProviderProps } from 'next-themes/dist/types';
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
diff --git a/packages/ui/src/components/toggleTheme.tsx b/packages/ui/src/components/toggleTheme.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import { Button } from '@repo/ui/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@repo/ui/components/ui/dropdown-menu';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>Light</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>Dark</DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>System</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml