Added underline to currently selected page

3 files changed, 15 insertions, 33 deletions

diff --git a/ufund-ui/src/app/app.component.css b/ufund-ui/src/app/app.component.css
index ff1e58c..ab1e60f 100644
--- a/ufund-ui/src/app/app.component.css
+++ b/ufund-ui/src/app/app.component.css
@@ -49,10 +49,6 @@
         gap: 20px;
     }
 
-    /*div:has(a:hover) a {*/
-    /*    color: light-dark(black, rgba(255, 255, 255, 0.5));*/
-    /*}*/
-
     a {
         color: var(--foreground-color);
         text-decoration: none;
@@ -62,27 +58,8 @@
         text-decoration: underline;
     }
 
-    /*a {*/
-    /*    display: block;*/
-    /*    position: relative;*/
-    /*    padding: 0.1em 0;*/
-    /*}*/
-
-    /*a::after {*/
-    /*    content: '';*/
-    /*    position: absolute;*/
-    /*    bottom: 4px;*/
-    /*    left: 0;*/
-    /*    width: 100%;*/
-    /*    height: 0.03em;*/
-    /*    background-color: white;*/
-    /*    opacity: 0;*/
-    /*    transition: opacity 300ms, transform 300ms;*/
-    /*}*/
+}
 
-    /*a:hover::after,*/
-    /*a:focus::after {*/
-    /*    opacity: 1;*/
-    /*    transform: translate3d(0, 0.2em, 0);*/
-    /*}*/
+.current {
+    text-decoration: underline!important;
 }
diff --git a/ufund-ui/src/app/app.component.html b/ufund-ui/src/app/app.component.html
index aebf9be..7277682 100644
--- a/ufund-ui/src/app/app.component.html
+++ b/ufund-ui/src/app/app.component.html
@@ -6,10 +6,9 @@
             </a>
         </div>
         <div>
-            <a *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a>
-            <a routerLink="/cupboard">Cupboard</a>
-            <a *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a>
-    <!--        <span>{{currentUser$ | async}}</span>-->
+            <a [class]="location.path() == '/dashboard' ? 'current' : ''" *ngIf="(currentUser | async)?.type === userType.MANAGER" routerLink="/dashboard">Dashboard</a>
+            <a [class]="location.path() == '/cupboard' ? 'current' : ''" routerLink="/cupboard">Cupboard</a>
+            <a [class]="location.path() == '/basket' ? 'current' : ''" *ngIf="(currentUser | async)?.type === userType.HELPER" routerLink="/basket">Basket</a>
             <button *ngIf="currentUser | async" (click)="logout()">Log Out</button>
             <button *ngIf="!(currentUser | async)" (click)="login()">Log In</button>
             <a href="#" (click)="$event.preventDefault(); toggleColorScheme()"><span class="icon">brightness_7</span></a>
diff --git a/ufund-ui/src/app/app.component.ts b/ufund-ui/src/app/app.component.ts
index 78fd050..fafffef 100644
--- a/ufund-ui/src/app/app.component.ts
+++ b/ufund-ui/src/app/app.component.ts
@@ -1,10 +1,10 @@
 import {Component, OnInit, Inject, ViewContainerRef} from '@angular/core';
 import {BehaviorSubject} from 'rxjs';
-import { DOCUMENT } from '@angular/common';
+import {DOCUMENT, Location} from '@angular/common';
 import {AuthService} from './services/auth.service';
 import {ToastsService} from './services/toasts.service';
 import {User, userType} from './models/User';
-import {ActivatedRoute, Router} from '@angular/router';
+import {Router} from '@angular/router';
 import {ModalService} from './services/modal.service';
 
 @Component({
@@ -20,10 +20,10 @@ export class AppComponent implements OnInit {
     constructor(
         private authService: AuthService,
         private router: Router,
-        private route: ActivatedRoute,
         protected toastService: ToastsService,
         private viewContainerRef: ViewContainerRef,
         protected modalService: ModalService,
+        protected location: Location,
         @Inject(DOCUMENT) private document: Document
     ) {}
 
@@ -41,6 +41,12 @@ export class AppComponent implements OnInit {
             console.log("Key found", dataParsed.key)
         }
 
+        if (this.location.path() == '/cupboard') {
+            console.log("work")
+        } else {
+            console.log(this.location.path())
+        }
+
         let theme = localStorage.getItem("theme")
         if(!theme) {
             // if no color scheme is set, get the system settings