From 90c38bca8bb8c3a4bc0ac1d11badf6f435f41b79 Mon Sep 17 00:00:00 2001
From: Michael <michael@collectflow.local>
Date: Sun, 22 Feb 2026 18:38:42 +0100
Subject: [PATCH] feat: Implement a new Sidebar component featuring dynamic
 navigation links, user session display, and logout functionality.

---
 src/components/shared/sidebar.tsx | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/shared/sidebar.tsx b/src/components/shared/sidebar.tsx
index ac3d4da..664a71d 100644
--- a/src/components/shared/sidebar.tsx
+++ b/src/components/shared/sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { LayoutGrid, Camera, FileDown, Settings, Package, BarChart3, LogOut, User as UserIcon } from "lucide-react";
+import { LayoutGrid, Camera, FileDown, Settings, Package, BarChart3, LogOut, User as UserIcon, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
@@ -83,10 +83,19 @@ export function Sidebar() {
                         <UserIcon className="w-4 h-4 text-[var(--accent)]" />
                     </div>
                     <div className="flex-1 min-w-0">
-                        <p className="text-[12px] font-bold text-[var(--text-primary)] truncate">{session?.user?.name || "Invité"}</p>
-                        <p className="text-[10px] uppercase font-black text-[var(--text-muted)] tracking-wider">
-                            {userRole === "admin" ? "Administrateur" : "Utilisateur"}
-                        </p>
+                        {session?.user ? (
+                            <>
+                                <p className="text-[12px] font-bold text-[var(--text-primary)] truncate">{session.user.name}</p>
+                                <p className="text-[10px] uppercase font-black text-[var(--text-muted)] tracking-wider">
+                                    {userRole === "admin" ? "Administrateur" : "Utilisateur"}
+                                </p>
+                            </>
+                        ) : (
+                            <div className="flex items-center gap-2">
+                                <Loader2 className="w-3 h-3 animate-spin text-[var(--accent)]" />
+                                <p className="text-[10px] text-[var(--text-muted)] animate-pulse">Session...</p>
+                            </div>
+                        )}
                     </div>
                 </div>