From aa035ac60d7fc5b128e3ff60d265832585990780 Mon Sep 17 00:00:00 2001
From: Chneemann <Andre-Ke@gmx.de>
Date: Sat, 23 Mar 2024 16:43:39 +0100
Subject: [PATCH] added path query

---
 .../components/sidebar/sidebar.component.html | 33 ++++++++++++++++---
 .../components/sidebar/sidebar.component.scss |  4 +++
 .../components/sidebar/sidebar.component.ts   | 21 ++++++++++--
 3 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/components/sidebar/sidebar.component.html b/src/app/shared/components/sidebar/sidebar.component.html
index d598694..a98f321 100644
--- a/src/app/shared/components/sidebar/sidebar.component.html
+++ b/src/app/shared/components/sidebar/sidebar.component.html
@@ -2,20 +2,45 @@
   <img class="logo" src="./assets/img/sidebar/logo.svg" alt="" />
 
   <nav>
-    <div id="navLinkSummary" class="nav-links-inner" routerLink="summary">
+    <div
+      id="navLinkSummary"
+      class="nav-links-inner"
+      routerLink="summary"
+      [ngClass]="{
+        active: currentPath == 'summary'
+      }"
+    >
       <img src="./assets/img/sidebar/summary.svg" alt="sumary" /><span
         >Summary</span
       >
     </div>
-    <div id="navLinkAddTask" class="nav-links-inner">
+    <div
+      id="navLinkAddTask"
+      class="nav-links-inner"
+      [ngClass]="{
+        active: currentPath == 'addtask'
+      }"
+    >
       <img src="./assets/img/sidebar/add-task.svg" alt="addtask" /><span
         >Add Task</span
       >
     </div>
-    <div id="navLinkBoard" class="nav-links-inner">
+    <div
+      id="navLinkBoard"
+      class="nav-links-inner"
+      [ngClass]="{
+        active: currentPath == 'board'
+      }"
+    >
       <img src="./assets/img/sidebar/board.svg" alt="board" /><span>Board</span>
     </div>
-    <div id="navLinkContacts" class="nav-links-inner">
+    <div
+      id="navLinkContacts"
+      class="nav-links-inner"
+      [ngClass]="{
+        active: currentPath == 'contacts'
+      }"
+    >
       <img src="./assets/img/sidebar/contacts.svg" alt="contacts" /><span
         >Contacts</span
       >
diff --git a/src/app/shared/components/sidebar/sidebar.component.scss b/src/app/shared/components/sidebar/sidebar.component.scss
index df8ae1e..5ed87d4 100644
--- a/src/app/shared/components/sidebar/sidebar.component.scss
+++ b/src/app/shared/components/sidebar/sidebar.component.scss
@@ -45,6 +45,10 @@ nav {
   }
 }
 
+.active {
+  background-color: var(--very-dark-blue);
+}
+
 .reference {
   display: flex;
   align-items: center;
diff --git a/src/app/shared/components/sidebar/sidebar.component.ts b/src/app/shared/components/sidebar/sidebar.component.ts
index 124ee5d..9829618 100644
--- a/src/app/shared/components/sidebar/sidebar.component.ts
+++ b/src/app/shared/components/sidebar/sidebar.component.ts
@@ -1,10 +1,25 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+
 @Component({
   selector: 'app-sidebar',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, CommonModule],
   templateUrl: './sidebar.component.html',
   styleUrl: './sidebar.component.scss',
 })
-export class SidebarComponent {}
+export class SidebarComponent {
+  currentPath: string = '';
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.currentPath = this.router.url.substring(1);
+        console.log(this.currentPath);
+      }
+    });
+  }
+}