From 2b6611c9a015b0b5df7f5023a2308007d1df5636 Mon Sep 17 00:00:00 2001
From: ewandor <ewandor@dorfsvald.net>
Date: Sat, 11 Feb 2023 19:03:48 +0100
Subject: [PATCH] Improving sidebar

---
 .../app/src/app/layout/sidenav/sidenav.component.html | 10 +++++-----
 front/app/src/app/layout/sidenav/sidenav.component.ts | 11 +++++++----
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/front/app/src/app/layout/sidenav/sidenav.component.html b/front/app/src/app/layout/sidenav/sidenav.component.html
index 0d9bb6d4..b857a9aa 100644
--- a/front/app/src/app/layout/sidenav/sidenav.component.html
+++ b/front/app/src/app/layout/sidenav/sidenav.component.html
@@ -1,10 +1,10 @@
-<div class="align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100 text-nowrap">
-    <a href="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
+<div class="pt-2 text-white min-vh-100 text-nowrap">
+    <a routerLink="/" class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
         <span class="fs-5 d-none d-sm-inline">Cooper, Hillman &<br/>Toshi LLP</span>
     </a>
-    <ul class="nav nav-pills flex-column align-items-sm-start mb-sm-auto mb-0 align-items-center" id="menu">
-        <li *ngFor="let item of Menu" class="nav-item">
-            <a href="{{item.link}}" class="nav-link align-middle px-0">
+    <ul class="nav nav-pills flex-column align-items-sm-start mb-sm-auto mb-0 w-100" id="menu">
+        <li *ngFor="let item of Menu" class="nav-item w-100">
+            <a class="nav-link px-3 w-100" routerLink="{{item.link}}" [class.active]="is_current_page(item)">
                 <i-bs [name]="item.icon"></i-bs><span class="ms-1 d-none d-sm-inline" [innerHTML]="item.title"></span>
             </a>
         </li>
diff --git a/front/app/src/app/layout/sidenav/sidenav.component.ts b/front/app/src/app/layout/sidenav/sidenav.component.ts
index f066ac82..289b4a23 100644
--- a/front/app/src/app/layout/sidenav/sidenav.component.ts
+++ b/front/app/src/app/layout/sidenav/sidenav.component.ts
@@ -1,9 +1,7 @@
 import { Component } from "@angular/core";
+import { Router } from '@angular/router';
 import { IconNamesEnum } from "ngx-bootstrap-icons";
 
-
-
-
 @Component({
     selector: "sidenav",
     templateUrl: "./sidenav.component.html",
@@ -37,5 +35,10 @@ export class SidenavComponent {
             icon: IconNamesEnum.PencilSquare
         },
     ]
-}
 
+    constructor(private router: Router) {}
+
+    is_current_page(menu_item: any) {
+        return this.router.url.indexOf(menu_item.link) > -1;
+    }
+}