added path query

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
       >

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;

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