derek/boredcareers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix highlighting for navbar

Browse Source
This commit is contained in:
Derek Holloway
2025-07-17 16:49:16 -07:00
parent 0b378df24a
commit ef5dfc1ecb
3 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Client/src/app/app.css
+5
View File
@@ -39,6 +39,11 @@
.nav-button:hover { .nav-button:hover {
background-color: #00000044; background-color: #00000044;
color: var(--Mistox-Light);
}
.active {
background-color: #00000010;
color: var(--Mistox-Bright); color: var(--Mistox-Bright);
} }
src/Client/src/app/app.html
+3 -3
View File
@@ -1,8 +1,8 @@
<div class="top-bar"> <div class="top-bar">
<div class="top-bar-buttons"> <div class="top-bar-buttons">
<a #mistLink class="nav-button" href="/">HOME</a> <a #homeLink class="nav-button" href="">HOME</a>
<a #mistLink class="nav-button" href="/companies">COMPANIES</a> <a #companiesLink class="nav-button" href="/companies">COMPANIES</a>
<a #mistLink class="nav-button" href="/jobs">JOB BOARD</a> <a #jobsLink class="nav-button" href="/jobs">JOB BOARD</a>
</div> </div>
<a class="top-bar-logo" href=""> <a class="top-bar-logo" href="">
<img class="top-bar-logo" style="margin: 0;" src="img/logo-full.png" /> <img class="top-bar-logo" style="margin: 0;" src="img/logo-full.png" />
src/Client/src/app/app.ts
+3 -4
View File
@@ -12,14 +12,13 @@ import { CommonModule } from '@angular/common';
export class App { export class App {
@ViewChild('homeLink') homeLink!: ElementRef<HTMLAnchorElement>; @ViewChild('homeLink') homeLink!: ElementRef<HTMLAnchorElement>;
@ViewChild('mistLink') mistLink!: ElementRef<HTMLAnchorElement>; @ViewChild('companiesLink') companyLink!: ElementRef<HTMLAnchorElement>;
@ViewChild('storeLink') storeLink!: ElementRef<HTMLAnchorElement>; @ViewChild('jobsLink') jobLink!: ElementRef<HTMLAnchorElement>;
@ViewChild('aboutLink') aboutLink!: ElementRef<HTMLAnchorElement>;
constructor(public auth: Authentication, private router: Router){} constructor(public auth: Authentication, private router: Router){}
ngAfterViewInit(){ ngAfterViewInit(){
let ViewLinks = [ this.homeLink, this.mistLink, this.storeLink, this.aboutLink ]; let ViewLinks = [ this.homeLink, this.companyLink, this.jobLink ];
ViewLinks.forEach(link => { ViewLinks.forEach(link => {
if (new URL(link.nativeElement.href).pathname === new URL(window.location.href).pathname){ if (new URL(link.nativeElement.href).pathname === new URL(window.location.href).pathname){
link.nativeElement.classList.add("active"); link.nativeElement.classList.add("active");