ok

src/app/shared/components/layout/sidebar/sidebar.component.css

@@ -1,10 +1,10 @@
-/* Globale Variablen für einfachere Wartung */
+/* Globale Variablen für dieses Bauteil */
 :host {
   --sidebar-width-expanded: 280px;
   --sidebar-width-collapsed: 96px;
   --sidebar-padding: 1rem;
-  --sidebar-margin: 1rem;
-  --transition-speed: 0.35s;
+  --sidebar-margin: 1rem; /* Angenommen, da es in Ihrem globalen CSS nicht vorhanden war */
+  --transition-speed: 0.35s; /* Lokale Geschwindigkeit für spezifische Sidebar-Animationen */
   --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -16,11 +16,11 @@
   gap: 2rem;
   width: var(--sidebar-width-expanded);
   height: calc(100vh - (var(--sidebar-margin) * 2));
-  margin: var(--sidebar-margin);
+  /* margin: var(--sidebar-margin); */
   padding: var(--sidebar-padding);
-  background-color: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 1rem;
+  /* background-color: var(--color-surface); ANGEPASST */
+  /* border: 1px solid var(--color-border); ANGEPASST */
+  border-radius: var(--border-radius-md); /* ANGEPASST */
   transition: width var(--transition-speed) var(--transition-ease);
 }
 
@@ -37,13 +37,14 @@
   flex-shrink: 0;
   width: 32px;
   height: 32px;
-  color: #111827;
+  color: var(--color-primary); /* ANGEPASST für Akzent */
 }
 
 .sidebar-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
+  color: var(--color-text); /* ANGEPASST */
   white-space: nowrap;
   clip-path: inset(0 0% 0 0);
   transition: clip-path var(--transition-speed) var(--transition-ease);
@@ -63,21 +64,23 @@
   display: flex;
   align-items: center;
   padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
+  border-radius: var(--border-radius-md); /* ANGEPASST */
   text-decoration: none;
   font-weight: 500;
-  color: #4b5563;
+  color: var(--color-text-light); /* ANGEPASST */
   white-space: nowrap;
   transition: background-color 0.2s, color 0.2s;
   overflow: hidden;
   position: relative; 
 }
 .nav-item:hover {
-  background-color: #f3f4f6;
+  background-color: var(--color-body-bg-hover); /* ANGEPASST */
+  color: var(--color-text); /* ANGEPASST */
 }
 .nav-item.active {
-  background-color: #3b82f6;
+  background: var(--color-primary); /* ANGEPASST */
   color: #fff;
+  box-shadow: var(--box-shadow-sm); /* ANGEPASST für Tiefe */
 }
 .nav-item app-icon {
   font-size: 1.25rem;
@@ -85,9 +88,7 @@
   flex-shrink: 0;
   position: relative;
   z-index: 2;
-  /* NEU: Fester Start-Hintergrund (Farbe der Sidebar) statt 'inherit' */
-  background-color: #fff; 
-  /* NEU: Fügt eine sanfte Transition für den Farbwechsel hinzu */
+  background-color: transparent; /* ANGEPASST */
   transition: background-color 0.2s; 
 }
 .nav-item span {
@@ -104,9 +105,9 @@
 .sidebar-toggle-btn {
   position: absolute;
   border-radius: 50%;
-  top: calc(var(--sidebar-padding) + 4px);
+  top: calc(var(--sidebar-padding) + 5px);
   right: var(--sidebar-padding);
-  transform: rotate(180deg);
+  transform: scale(0.55) rotate(180deg);
   transition: top var(--transition-speed) var(--transition-ease),
     right var(--transition-speed) var(--transition-ease),
     transform var(--transition-speed) var(--transition-ease),
@@ -127,17 +128,19 @@
   clip-path: inset(0 100% 0 0);
   margin-left: -20px;
   pointer-events: none;
-  
 }
 
 .sidebar.collapsed .sidebar-toggle-btn {
-  right: -18px;
-  transform: rotate(0deg);
+  
+  right: -2px;
+  transform: scale(0.55) rotate(0deg); /* Hinzugefügt für vertikale Zentrierung */
+  /* box-shadow: var(--box-shadow-md); ANGEPASST */
 }
 
+/* 6. Zustandsabhängige Hintergrundfarben für das Icon */
 .nav-item:hover app-icon {
-  background-color: #f3f4f6; /* Derselbe Hintergrund wie .nav-item:hover */
+  background-color: transparent; /* ANGEPASST */
 }
 .nav-item.active app-icon {
-  background-color: #3b82f6; /* Derselbe Hintergrund wie .nav-item.active */
+  background: transparent;
 }