rdy

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

@@ -10,7 +10,6 @@
 
 /* 1. Der Sidebar-Container */
 .sidebar {
-  /* WICHTIG: Dies ist jetzt der Positionierungs-Kontext für den Button */
   position: relative;
   display: flex;
   flex-direction: column;
@@ -71,6 +70,7 @@
   white-space: nowrap;
   transition: background-color 0.2s, color 0.2s;
   overflow: hidden;
+  position: relative; 
 }
 .nav-item:hover {
   background-color: #f3f4f6;
@@ -83,6 +83,12 @@
   font-size: 1.25rem;
   width: 32px;
   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 */
+  transition: background-color 0.2s; 
 }
 .nav-item span {
   white-space: nowrap;
@@ -90,38 +96,24 @@
   margin-left: 0.75rem;
   transition: clip-path 0.3s var(--transition-ease),
     margin-left 0.3s var(--transition-ease);
+  position: relative;
+  z-index: 1;
 }
 
-/* ======================================================= */
-/* --- NEU: Positionierung des Toggle-Buttons          --- */
-/* ======================================================= */
-
+/* 4. Positionierung des Toggle-Buttons */
 .sidebar-toggle-btn {
   position: absolute;
-  /* width: 36px;
-  height: 36px; */
   border-radius: 50%;
-  /* border: 1px solid #e5e7eb; */
-  /* background-color: #fff; */
-
-  /* Startposition (aufgeklappt): Im Header, rechts */
-  top: calc(
-    var(--sidebar-padding) + 5px
-  ); /* Sidebar-Padding + Header-Padding */
+  top: calc(var(--sidebar-padding) + 4px);
   right: var(--sidebar-padding);
   transform: rotate(180deg);
-
-  /* Sanfter Übergang für alle Änderungen */
   transition: top var(--transition-speed) var(--transition-ease),
     right var(--transition-speed) var(--transition-ease),
     transform var(--transition-speed) var(--transition-ease),
     box-shadow var(--transition-speed) var(--transition-ease);
 }
 
-/* ======================================================= */
-/* --- Stile für den eingeklappten Zustand (.collapsed)  --- */
-/* ======================================================= */
-
+/* 5. Stile für den eingeklappten Zustand (.collapsed) */
 .sidebar.collapsed {
   width: var(--sidebar-width-collapsed);
 }
@@ -131,19 +123,21 @@
   pointer-events: none;
 }
 
-.sidebar.collapsed .sidebar-logo {
-  justify-content: center;
-}
-
 .sidebar.collapsed .nav-item span {
   clip-path: inset(0 100% 0 0);
   margin-left: -20px;
   pointer-events: none;
+  
 }
 
-/* Endposition (zugeklappt): Außen, vertikal zentriert */
 .sidebar.collapsed .sidebar-toggle-btn {
-  /* top: 50%; */
   right: -18px;
   transform: rotate(0deg);
 }
+
+.nav-item:hover app-icon {
+  background-color: #f3f4f6; /* Derselbe Hintergrund wie .nav-item:hover */
+}
+.nav-item.active app-icon {
+  background-color: #3b82f6; /* Derselbe Hintergrund wie .nav-item.active */
+}