UI #2
@@ -39,6 +39,11 @@
|
||||
|
||||
.nav-button:hover {
|
||||
background-color: #00000044;
|
||||
color: var(--Mistox-Light);
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #00000010;
|
||||
color: var(--Mistox-Bright);
|
||||
}
|
||||
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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");
|
||||
|
||||
Reference in New Issue
Block a user