From 804b0f0aad5d356e8e27ba579b2dc275b5223992 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 23 Dec 2025 12:15:49 +0100
Subject: [PATCH] feat: add sidebar-opaque color variable and update Sidebar
 component styling; enhance visual consistency by applying new background
 color to the sidebar

---
 app/globals.css                  | 3 +++
 components/dashboard/sidebar.tsx | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index ff31fd9..fca1f69 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -74,6 +74,7 @@
 
   /* Sidebar moderne avec glassmorphism très prononcé */
   --sidebar: oklch(1 0 0 / 0.5);
+  --sidebar-opaque: oklch(1 0 0);
   --sidebar-foreground: oklch(0.2 0.015 280);
   --sidebar-primary: oklch(0.6 0.25 270);
   --sidebar-primary-foreground: oklch(0.99 0 0);
@@ -157,6 +158,7 @@
 
   /* Sidebar avec profondeur distincte */
   --sidebar: oklch(0.1 0.01 260);
+  --sidebar-opaque: oklch(0.1 0.01 260);
   --sidebar-foreground: oklch(0.9 0.005 260);
   --sidebar-primary: oklch(0.72 0.19 220);
   --sidebar-primary-foreground: oklch(0.12 0.008 260);
@@ -207,6 +209,7 @@
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --color-sidebar: var(--sidebar);
+  --color-sidebar-opaque: var(--sidebar-opaque);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
diff --git a/components/dashboard/sidebar.tsx b/components/dashboard/sidebar.tsx
index b92cd95..d8ac0c6 100644
--- a/components/dashboard/sidebar.tsx
+++ b/components/dashboard/sidebar.tsx
@@ -168,7 +168,8 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
       <Sheet open={open} onOpenChange={onOpenChange}>
         <SheetContent
           side="left"
-          className="w-64 p-0 bg-sidebar text-sidebar-foreground border-sidebar-border"
+          className="w-64 p-0 text-sidebar-foreground border-sidebar-border"
+          style={{ backgroundColor: 'var(--sidebar-opaque)' }}
         >
           <SheetTitle className="sr-only">Navigation</SheetTitle>
           <div className="flex flex-col h-full">