localstorage service u. auslagerung

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

@@ -1,76 +1,51 @@
-import { Component, Inject, PLATFORM_ID, OnInit } from '@angular/core';
-import { CommonModule, isPlatformBrowser } from '@angular/common';
+// /src/app/core/components/default-layout/sidebar/sidebar.component.ts
+
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink, RouterLinkActive } from '@angular/router'; // RouterLink und RouterLinkActive importieren
 import { IconComponent } from '../../ui/icon/icon.component';
+import { StorageService } from '../../../../core/services/storage.service';
 import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-sidebar',
   standalone: true,
-  imports: [CommonModule, IconComponent],
+  imports: [CommonModule, IconComponent], // RouterLink und RouterLinkActive hier hinzufügen
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.css',
 })
 export class SidebarComponent implements OnInit {
-  // 1. OnInit implementieren
-  // Key für localStorage, genau wie beim Dark Mode
-  private readonly sidebarCollapsedKey = 'app-sidebar-collapsed-setting';
+  // --- Abhängigkeiten mit moderner inject()-Syntax ---
+  private storageService = inject(StorageService);
 
-  // Dummy-Eigenschaft für die aktive Route
-  activeRoute = 'dashboard';
-
-  // Der Standardwert ist 'false' (aufgeklappt), wird aber sofort überschrieben
+  private readonly sidebarCollapsedKey = 'app-sidebar-collapsed';
   public isCollapsed = false;
 
-  // 2. PLATFORM_ID injizieren, um localStorage sicher zu verwenden
-  constructor(
-    @Inject(PLATFORM_ID) private platformId: Object,
-    private router: Router
-  ) {}
+  activeRoute = 'dashboard';
+  constructor(private router: Router) {}
 
-  // 3. Beim Start der Komponente den gespeicherten Zustand laden
   ngOnInit(): void {
     this.loadCollapsedState();
   }
 
-  // Dummy-Methode
   setActive(route: string): void {
     this.activeRoute = route;
     this.router.navigateByUrl('/shop/' + route);
-    
   }
 
-  // 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);
-      }
-    }
+    // Der Service kümmert sich um die Browser-Prüfung und gibt boolean oder null zurück
+    this.isCollapsed =
+      this.storageService.getItem<boolean>(this.sidebarCollapsedKey) ?? false;
   }
 
-  // 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);
-      }
-    }
+    // Der Service kümmert sich um die Serialisierung des booleans
+    this.storageService.setItem(this.sidebarCollapsedKey, this.isCollapsed);
   }
 }