|
|
|
@ -1,40 +1,48 @@
|
|
|
|
|
<mat-sidenav-container *ngIf="showNav" class="sidenav-container">
|
|
|
|
|
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
|
|
|
|
|
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
|
|
|
|
|
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
|
|
|
|
|
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
|
|
|
|
|
[opened]="!(isHandset$ | async)">
|
|
|
|
|
<mat-toolbar>{{applicationName}}</mat-toolbar>
|
|
|
|
|
<mat-nav-list>
|
|
|
|
|
<span *ngFor="let nav of navItems">
|
|
|
|
|
<a *ngIf="nav.requiresAdmin && isAdmin || !nav.requiresAdmin" mat-list-item [routerLink]="nav.link"
|
|
|
|
|
[routerLinkActive]="getTheme()" >
|
|
|
|
|
[routerLinkActive]="getTheme()">
|
|
|
|
|
<mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
|
|
|
|
|
{{nav.name | translate}}
|
|
|
|
|
</a> </span>
|
|
|
|
|
|
|
|
|
|
<a class="bottom-nav-link" mat-list-item [routerLinkActive]="theme === 'dark' ? 'active-list-item-dark' : 'active-list-item'" aria-label="Toggle sidenav" (click)="logOut();">
|
|
|
|
|
<a class="bottom-nav-link" mat-list-item
|
|
|
|
|
[routerLinkActive]="theme === 'dark' ? 'active-list-item-dark' : 'active-list-item'" aria-label="Toggle sidenav"
|
|
|
|
|
(click)="logOut();">
|
|
|
|
|
<mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
|
|
|
|
|
{{ 'NavigationBar.Logout' | translate }}
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<a mat-list-item aria-label="Toggle sidenav" (click)="switchTheme();">
|
|
|
|
|
<mat-slide-toggle>
|
|
|
|
|
{{ 'NavigationBar.ChangeTheme' | translate }}
|
|
|
|
|
</mat-slide-toggle>
|
|
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
</mat-nav-list>
|
|
|
|
|
</mat-sidenav>
|
|
|
|
|
<mat-sidenav-content>
|
|
|
|
|
<mat-toolbar color="primary">
|
|
|
|
|
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
|
|
|
|
|
<button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
|
|
|
|
|
*ngIf="isHandset$ | async">
|
|
|
|
|
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="col-10 offset-1">
|
|
|
|
|
<span class="middle justify-content-center align-items-center">
|
|
|
|
|
<!-- Search Bar -->
|
|
|
|
|
<app-nav-search></app-nav-search>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-1">
|
|
|
|
|
<div class="float-right">
|
|
|
|
|
<a mat-list-item (click)="switchTheme()">
|
|
|
|
|
<mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">brightness_7</mat-icon>
|
|
|
|
|
<mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</mat-toolbar>
|
|
|
|
|
|
|
|
|
|