added mobile sidebar

src/app/app.component.scss

@@ -15,7 +15,6 @@ app-sidebar-mobile {
   bottom: 0;
   width: 100%;
   height: 80px;
-  background-color: var(--bgSidebar);
 }
 
 main {

src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.html

@@ -1 +1,53 @@
-<p>sidebar-mobile works!</p>
+<section>
+  <nav>
+    <div
+      class="nav-links"
+      routerLink="summary"
+      [ngClass]="{
+        active: currentPath == 'summary'
+      }"
+    >
+      <img
+        src="./../../../../../assets/img/sidebar/summary.svg"
+        alt="summary"
+      />
+      <p>Summary</p>
+    </div>
+    <div
+      class="nav-links"
+      routerLink="board"
+      [ngClass]="{
+        active: currentPath == 'board'
+      }"
+    >
+      <img src="./../../../../../assets/img/sidebar/board.svg" alt="board" />
+      <p>Board</p>
+    </div>
+    <div
+      class="nav-links"
+      routerLink="add-task"
+      [ngClass]="{
+        active: currentPath == 'add-task'
+      }"
+    >
+      <img
+        src="./../../../../../assets/img/sidebar/add-task.svg"
+        alt="addtask"
+      />
+      <p>Add Tasks</p>
+    </div>
+    <div
+      class="nav-links"
+      routerLink="contacts"
+      [ngClass]="{
+        active: currentPath == 'contacts'
+      }"
+    >
+      <img
+        src="./../../../../../assets/img/sidebar/contacts.svg"
+        alt="contacts"
+      />
+      <p>Contacts</p>
+    </div>
+  </nav>
+</section>

src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.scss

@@ -0,0 +1,37 @@
+nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  height: 80px;
+  background-color: var(--bgSidebar);
+}
+
+.nav-links {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 80px;
+  height: 65px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--very-dark-blue);
+    border-radius: 8px;
+  }
+  p {
+    color: var(--light-gray);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    margin: 0;
+    padding: 8px 0 0 0;
+  }
+}
+
+.active {
+  background-color: var(--very-dark-blue);
+}

src/app/shared/components/sidebar/sidebar-mobile/sidebar-mobile.component.ts

@@ -1,12 +1,28 @@
+import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-sidebar-mobile',
   standalone: true,
-  imports: [],
+  imports: [RouterModule, CommonModule],
   templateUrl: './sidebar-mobile.component.html',
-  styleUrl: './sidebar-mobile.component.scss'
+  styleUrl: './sidebar-mobile.component.scss',
 })
 export class SidebarMobileComponent {
+  currentPath: string = '';
 
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.getCurrentPath();
+  }
+
+  getCurrentPath() {
+    this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.currentPath = this.router.url.substring(1);
+      }
+    });
+  }
 }