From ef5dfc1ecbd65014bb942b6a9b465a65107c5b15 Mon Sep 17 00:00:00 2001
From: Derek Holloway <derek@mistox.com>
Date: Thu, 17 Jul 2025 16:49:16 -0700
Subject: [PATCH] Fix highlighting for navbar

---
 src/Client/src/app/app.css  | 5 +++++
 src/Client/src/app/app.html | 6 +++---
 src/Client/src/app/app.ts   | 7 +++----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Client/src/app/app.css b/src/Client/src/app/app.css
index 4d772e9..1afe8cc 100644
--- a/src/Client/src/app/app.css
+++ b/src/Client/src/app/app.css
@@ -39,6 +39,11 @@
 
     .nav-button:hover {
         background-color: #00000044;
+        color: var(--Mistox-Light);
+    }
+
+    .active {
+        background-color: #00000010;
         color: var(--Mistox-Bright);
     }
 
diff --git a/src/Client/src/app/app.html b/src/Client/src/app/app.html
index d851270..17d70fc 100644
--- a/src/Client/src/app/app.html
+++ b/src/Client/src/app/app.html
@@ -1,8 +1,8 @@
 <div class="top-bar">
   <div class="top-bar-buttons">
-    <a #mistLink class="nav-button" href="/">HOME</a>
-    <a #mistLink class="nav-button" href="/companies">COMPANIES</a>
-    <a #mistLink class="nav-button" href="/jobs">JOB BOARD</a>
+    <a #homeLink class="nav-button" href="">HOME</a>
+    <a #companiesLink class="nav-button" href="/companies">COMPANIES</a>
+    <a #jobsLink class="nav-button" href="/jobs">JOB BOARD</a>
   </div>
   <a class="top-bar-logo" href="">
     <img class="top-bar-logo" style="margin: 0;" src="img/logo-full.png" />
diff --git a/src/Client/src/app/app.ts b/src/Client/src/app/app.ts
index 2471b2e..021882b 100644
--- a/src/Client/src/app/app.ts
+++ b/src/Client/src/app/app.ts
@@ -12,14 +12,13 @@ import { CommonModule } from '@angular/common';
 export class App {
 
   @ViewChild('homeLink') homeLink!: ElementRef<HTMLAnchorElement>;
-  @ViewChild('mistLink') mistLink!: ElementRef<HTMLAnchorElement>;
-  @ViewChild('storeLink') storeLink!: ElementRef<HTMLAnchorElement>;
-  @ViewChild('aboutLink') aboutLink!: ElementRef<HTMLAnchorElement>;
+  @ViewChild('companiesLink') companyLink!: ElementRef<HTMLAnchorElement>;
+  @ViewChild('jobsLink') jobLink!: ElementRef<HTMLAnchorElement>;
 
   constructor(public auth: Authentication, private router: Router){}
 
   ngAfterViewInit(){
-    let ViewLinks = [ this.homeLink, this.mistLink, this.storeLink, this.aboutLink ];
+    let ViewLinks = [ this.homeLink, this.companyLink, this.jobLink ];
     ViewLinks.forEach(link => {
       if (new URL(link.nativeElement.href).pathname === new URL(window.location.href).pathname){
         link.nativeElement.classList.add("active");