init

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