sidebar

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

@@ -3,8 +3,7 @@
     <div class="nav-item" (click)="toggleSidebar()">
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
 
-        <span>Toggle</span>
-     
+      <span>Toggle</span>
     </div>
 
     <div
@@ -14,9 +13,29 @@
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
 
-        <span>Home</span>
-      
+      <span>Home</span>
     </div>
+
+    <div
+      class="nav-item"
+      [class.active]="activeRoute === 'categories'"
+      (click)="setActive('categories')"
+    >
+      <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
+
+      <span>categories</span>
+    </div>
+
+    <div
+      class="nav-item"
+      [class.active]="activeRoute === 'discounts'"
+      (click)="setActive('discounts')"
+    >
+      <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
+
+      <span>discounts</span>
+    </div>
+
     <div
       class="nav-item"
       [class.active]="activeRoute === 'uebersicht'"
@@ -24,8 +43,7 @@
     >
       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
 
-        <span>Übersicht</span>
-      
+      <span>Übersicht</span>
     </div>
   </nav>
 </aside>

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

@@ -1,15 +1,17 @@
 import { Component, Inject, PLATFORM_ID, OnInit } from '@angular/core';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { IconComponent } from '../../ui/icon/icon.component';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-sidebar',
   standalone: true,
   imports: [CommonModule, IconComponent],
   templateUrl: './sidebar.component.html',
-  styleUrl: './sidebar.component.css'
+  styleUrl: './sidebar.component.css',
 })
-export class SidebarComponent implements OnInit { // 1. OnInit implementieren
+export class SidebarComponent implements OnInit {
+  // 1. OnInit implementieren
   // Key für localStorage, genau wie beim Dark Mode
   private readonly sidebarCollapsedKey = 'app-sidebar-collapsed-setting';
 
@@ -20,7 +22,10 @@ export class SidebarComponent implements OnInit { // 1. OnInit implementieren
   public isCollapsed = false;
 
   // 2. PLATFORM_ID injizieren, um localStorage sicher zu verwenden
-  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: Object,
+    private router: Router
+  ) {}
 
   // 3. Beim Start der Komponente den gespeicherten Zustand laden
   ngOnInit(): void {
@@ -30,6 +35,8 @@ export class SidebarComponent implements OnInit { // 1. OnInit implementieren
   // 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
@@ -57,7 +64,10 @@ export class SidebarComponent implements OnInit { // 1. OnInit implementieren
   private saveCollapsedState(): void {
     if (isPlatformBrowser(this.platformId)) {
       try {
-        localStorage.setItem(this.sidebarCollapsedKey, String(this.isCollapsed));
+        localStorage.setItem(
+          this.sidebarCollapsedKey,
+          String(this.isCollapsed)
+        );
       } catch (e) {
         console.error('Could not write to localStorage for sidebar state:', e);
       }