init

src/app/shared/components/layout/page-header/page-header.component.ts

@@ -7,7 +7,6 @@ import {
   AfterViewInit,
 } from '@angular/core';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { SearchBarComponent } from '../search-bar/search-bar.component';
 import { UserProfileComponent } from '../user-profile/user-profile.component';
 import { SlideToggleComponent } from '../../form/slide-toggle/slide-toggle.component';
 import { FormsModule } from '@angular/forms';
@@ -17,7 +16,6 @@ import { FormsModule } from '@angular/forms';
   standalone: true,
   imports: [
     CommonModule,
-    SearchBarComponent,
     UserProfileComponent,
     SlideToggleComponent,
     FormsModule,

src/app/shared/components/layout/search-bar/search-bar.component.css

@@ -5,7 +5,7 @@
 
 .search-bar {
   position: relative;
-  width: 300px;
+  width: 100%
 }
 .search-bar svg {
   position: absolute;

src/app/shared/components/layout/search-bar/search-bar.component.html

@@ -3,5 +3,5 @@
     <circle cx="11" cy="11" r="8"></circle>
     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
   </svg>
-  <input type="text" placeholder="Dashboard durchsuchen..." (input)="onSearch($event)" />
+  <input type="text" placeholder="Durchsuchen..." (input)="onSearch($event)" />
 </div>

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;
+}

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

@@ -28,6 +28,4 @@
       
     </div>
   </nav>
-
- 
 </aside>

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

@@ -1,29 +1,66 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, Inject, PLATFORM_ID, OnInit } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { IconComponent } from '../../ui/icon/icon.component';
-import { ButtonComponent } from '../../ui/button/button.component';
 
 @Component({
   selector: 'app-sidebar',
   standalone: true,
-  imports: [CommonModule, IconComponent,ButtonComponent],
+  imports: [CommonModule, IconComponent],
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.css'
 })
-export class SidebarComponent {
-  // Dummy-Eigenschaft für die aktive Route, damit der Code funktioniert
+export class SidebarComponent implements OnInit { // 1. OnInit implementieren
+  // Key für localStorage, genau wie beim Dark Mode
+  private readonly sidebarCollapsedKey = 'app-sidebar-collapsed-setting';
+  
+  // Dummy-Eigenschaft für die aktive Route
   activeRoute = 'dashboard';
 
-  // NEU: Eigenschaft, um den Zustand der Sidebar zu speichern
+  // Der Standardwert ist 'false' (aufgeklappt), wird aber sofort überschrieben
   public isCollapsed = false;
 
-  // Dummy-Methode, damit der Code funktioniert
+  // 2. PLATFORM_ID injizieren, um localStorage sicher zu verwenden
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
+
+  // 3. Beim Start der Komponente den gespeicherten Zustand laden
+  ngOnInit(): void {
+    this.loadCollapsedState();
+  }
+
+  // Dummy-Methode
   setActive(route: string): void {
     this.activeRoute = route;
   }
 
-  // NEU: Methode, um den Zustand umzuschalten
+  // 4. Die Umschalt-Methode aktualisieren, damit sie den neuen Zustand speichert
   toggleSidebar(): void {
+    // Zuerst den Zustand ändern
     this.isCollapsed = !this.isCollapsed;
+    // Dann den neuen Zustand speichern
+    this.saveCollapsedState();
+  }
+
+  // 5. Methode zum Laden des Zustands (kopiert vom Dark-Mode-Muster)
+  private loadCollapsedState(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        const storedValue = localStorage.getItem(this.sidebarCollapsedKey);
+        // Setze den Zustand der Komponente basierend auf dem gespeicherten Wert
+        this.isCollapsed = storedValue === 'true';
+      } catch (e) {
+        console.error('Could not access localStorage for sidebar state:', e);
+      }
+    }
+  }
+
+  // 6. Methode zum Speichern des Zustands (kopiert vom Dark-Mode-Muster)
+  private saveCollapsedState(): void {
+    if (isPlatformBrowser(this.platformId)) {
+      try {
+        localStorage.setItem(this.sidebarCollapsedKey, String(this.isCollapsed));
+      } catch (e) {
+        console.error('Could not write to localStorage for sidebar state:', e);
+      }
+    }
   }
 }