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

Updated styling

Browse Source
This commit is contained in:
Zakary Timson
2022-09-24 17:54:51 -04:00
parent 0e76d7c1b1
commit 6b6765891b
25 changed files with 206 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,51 +1,20 @@
<mat-toolbar>
<mat-toolbar-row>
<div>
<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner">
<img src="assets/img/capricorn.png" alt="Capricorn" height="45" width="45">
<a class="navbar-brand d-flex align-items-center" routerLink="/" fragment="banner" (click)="scroll('banner')">
<img src="assets/img/capricorn.png" alt="Capricorn" height="45px" width="45px">
<div class="px-2">LEGIO · XXX</div>
</a>
</div>
<div class="flex-grow-1"></div>
<div *ngIf="!hamburger">
<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>
<mat-menu #eventsMenu="matMenu">
<button mat-menu-item>Castra Aestiva</button>
<button mat-menu-item>Castra Hiberna</button>
<mat-divider></mat-divider>
<button mat-menu-item>Calendar</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="learnMenu" class="navbar-button">
Learn <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #learnMenu="matMenu">
<button mat-menu-item>Legio XXX</button>
<button mat-menu-item>Legion Camp</button>
<button mat-menu-item>Legion Headquarters</button>
<button mat-menu-item>Legion Organization</button>
<button mat-menu-item>Legionairy Equipment</button>
<button mat-menu-item>Legionairy Training</button>
<mat-divider></mat-divider>
<button mat-menu-item>Resources</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="membersMenu" class="navbar-button">
Members <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #membersMenu="matMenu">
<button mat-menu-item>Getting Started</button>
<button mat-menu-item>Rules & Regulations</button>
<mat-divider></mat-divider>
<button mat-menu-item>Kit Assembly</button>
<button mat-menu-item>Kit Maintinance</button>
<button mat-menu-item>Trusted Vendors</button>
<mat-divider></mat-divider>
<button mat-menu-item>Login/Register</button>
</mat-menu>
<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">
<button mat-button class="navbar-button">{{item.label}}</button>
</a>
<ng-container *ngFor="let group of links.other">
<ng-template [ngTemplateOutlet]="navGroup" [ngTemplateOutletContext]="{'$implicit': group}"></ng-template>
</ng-container>
</div>
<button *ngIf="hamburger" mat-icon-button class="mr-3">
<mat-icon (click)="hamburgerClick.emit()">menu</mat-icon>
@ -53,3 +22,18 @@
</mat-toolbar-row>
</mat-toolbar>
<div class="navbar-spacing"><!-- Spacing --></div>
<ng-template #navGroup let-group>
<button mat-button [matMenuTriggerFor]="menu" class="navbar-button">
{{group.label}} <mat-icon>expand_more</mat-icon>
</button>
<mat-menu #menu="matMenu">
<ng-container *ngFor="let section of group.children; let first = first">
<mat-divider *ngIf="!first"></mat-divider>
<button *ngFor="let item of section" mat-menu-item [routerLink]="item.url" [fragment]="item.fragment"
(click)="item.fragment ? scroll(item.fragment) : null">
{{item.label}}
</button>
</ng-container>
</mat-menu>
</ng-template>