init

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

@@ -1,6 +1,6 @@
 /* Globale Variablen für dieses Bauteil */
 :host {
-  --sidebar-width-expanded: 280px;
+  --sidebar-width-expanded: 200px;
   --sidebar-width-collapsed: 96px;
   --sidebar-padding: 1rem;
   --sidebar-margin: 1rem;
@@ -15,9 +15,11 @@
   flex-direction: column;
   gap: 1.5rem; /* Reduzierter Abstand */
   width: var(--sidebar-width-expanded);
-  height:  calc(100vh - 2rem - 46px);
+  height: calc(100vh - 4rem - 46px);
+
   padding: var(--sidebar-padding);
-  /* border-right: 1px solid var(--color-border); */
+  padding-top:0;
+  /* border: 1px solid var(--color-border); */
   /* border-radius: var(--border-radius-md); */
   transition: width var(--transition-speed) var(--transition-ease);
   /* background-color: var(--color-surface); */
@@ -45,16 +47,17 @@
   white-space: nowrap;
   transition: background-color 0.2s, color 0.2s;
   overflow: hidden;
-  position: relative; 
+  position: relative;
   cursor: pointer;
 }
 .nav-item:hover {
-  background-color: var(--color-body-bg-hover);
+  background-color: var(--color-surface);
   color: var(--color-text);
 }
 .nav-item.active {
-  background: var(--color-primary);
-  color: #fff;
+  background: var(--color-body-bg-active);
+  color: var(--color-text);
+
   box-shadow: var(--box-shadow-sm);
 }
 .nav-item app-icon {
@@ -64,7 +67,7 @@
   position: relative;
   z-index: 2;
   background-color: transparent;
-  transition: background-color 0.2s; 
+  transition: background-color 0.2s;
 }
 .nav-item span {
   white-space: nowrap;
@@ -94,8 +97,8 @@
 
 /* 4. Zustandsabhängige Hintergrundfarben für das Icon */
 .nav-item:hover app-icon {
-  background-color: var(--color-body-bg-hover);
+  background: transparent;
 }
 .nav-item.active app-icon {
-  background: var(--color-primary);
-}
+  background: transparent;
+}