ztimson/legio-30
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

banner & styling

Browse Source
This commit is contained in:
Zakary Timson
2022-09-19 11:34:42 -04:00
parent bd9ef9214e
commit a8e4b4371b
31 changed files with 265 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/navbar/navbar.component.html
View File

@ -1,16 +1,16 @@
<mat-toolbar>
<mat-toolbar-row>
<div>
<a class="navbar-brand d-flex align-items-center" href="#">
<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner">
<img src="assets/img/capricorn.png" alt="Capricorn" height="45" width="45">
<div class="px-2">LEGIO · XXX</div>
</a>
</div>
<div class="flex-grow-1"></div>
<div *ngIf="!hamburger">
<a href="#about"><button mat-button class="navbar-button">About</button></a>
<a href="#contact"><button mat-button class="navbar-button">Contact</button ></a>
<a href="#gallery"><button mat-button class="navbar-button">Gallery</button></a>
<a routerLink="/" fragment="about"><button mat-button class="navbar-button">About</button></a>
<a routerLink="/" fragment="contact"><button mat-button class="navbar-button">Contact</button ></a>
<a routerLink="gallery"><button mat-button class="navbar-button">Gallery</button></a>
<button mat-button [matMenuTriggerFor]="eventsMenu" class="navbar-button">
Events <mat-icon>expand_more</mat-icon>
</button>

13
src/app/components/navbar/navbar.component.scss
View File

@ -17,18 +17,21 @@
.navbar-brand {
color: #fff;
text-decoration: none;
font-weight: lighter;
&:hover img {
filter: brightness(5%) sepia(75) saturate(100) hue-rotate(25deg);
}
}
.navbar-button {
color: rgba(255, 255, 255, 0.55);
//color: rgba(255, 255, 255, 0.55);
font-weight: normal;
padding: 0 8px 0 8px;
&:hover {
color: rgba(255, 255, 255, 0.75);
}
//&:hover {
// color: rgba(255, 255, 255, 0.75);
//}
}
}

26
src/app/components/navbar/navbar.component.ts
View File

@ -1,12 +1,34 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
import {AfterViewInit, Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
import {filter, Subscription} from 'rxjs';
@Component({
selector: 'xxx-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
export class NavbarComponent implements AfterViewInit, OnDestroy {
private sub!: Subscription;
@Input() hamburger = true;
@Output() hamburgerClick = new EventEmitter<void>();
constructor(private route: ActivatedRoute) { }
ngAfterViewInit() {
this.sub = this.route.fragment.subscribe(frag => {
if(frag) this.scroll(frag);
});
}
ngOnDestroy(): void {
if(this.sub) this.sub.unsubscribe();
}
scroll(id: string) {
const el = document.getElementById(id);
if(el) el.scrollIntoView({behavior: 'smooth'});
else setTimeout(() => this.scroll(id), 500);
}
}