Files
legio-30/src/app/components/navbar/navbar.component.html
ztimson c18f436e5d
All checks were successful
Build Website / Build NPM Project (push) Successful in 1m43s
Build Website / Tag Version (push) Successful in 11s
Build Website / Build & Push Dockerfile (push) Successful in 2m49s
Updated styles
2024-01-11 09:55:42 -05:00

50 lines
1.9 KiB
HTML

<mat-toolbar class="d-print-none">
<mat-toolbar-row>
<!-- Brand -->
<a class="navbar-brand" routerLink="/" style="text-decoration: none">
<xxx-logo class="px-2" [expand]="true"></xxx-logo>
</a>
<!-- Spacer -->
<div class="flex-grow-1"></div>
<!-- Full NavBar -->
<div *ngIf="!hamburger">
<a *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment">
<button mat-button class="navbar-button" aria-label="Menu">{{item.label}}</button>
</a>
<ng-container *ngFor="let group of links.other">
<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">
{{item.label}}
</button>
</ng-container>
</mat-menu>
</ng-container>
</div>
<!-- Mobile NavBar -->
<button *ngIf="hamburger" mat-icon-button class="text-start" [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let item of links.topLevel" [routerLink]="item.url" [fragment]="item.fragment">
{{item.label}}
</button>
<ng-container *ngFor="let group of links.other">
<button mat-menu-item [matMenuTriggerFor]="menu">{{group.label}}</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">
{{item.label}}
</button>
</ng-container>
</mat-menu>
</ng-container>
</mat-menu>
</mat-toolbar-row>
</mat-toolbar>