139 lines
4.1 KiB
HTML
139 lines
4.1 KiB
HTML
<div class="navbar-container" [class.example-is-mobile]="mobileQuery.matches">
|
|
|
|
<!-- Top navbar -->
|
|
<mat-toolbar class="navbar" color="primary">
|
|
|
|
<button mat-icon-button (click)="snav.toggle()">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
|
|
<a class="navbar-brand" [routerLink]="['/']" matTooltip="Home">
|
|
<h1>
|
|
Jucundus
|
|
</h1>
|
|
</a>
|
|
|
|
<span class="navbar-spacer"></span>
|
|
|
|
<button mat-icon-button [matMenuTriggerFor]="notificationMenu">
|
|
<mat-icon matBadge="2" matBadgeColor="accent">notifications</mat-icon>
|
|
</button>
|
|
<mat-menu #notificationMenu="matMenu" xPosition="before" yPosition="above" [overlapTrigger]="false">
|
|
|
|
<a mat-menu-item>
|
|
<span>You have new tasks</span>
|
|
</a>
|
|
<a mat-menu-item>
|
|
<span>You have a new message</span>
|
|
</a>
|
|
|
|
</mat-menu>
|
|
|
|
<button mat-button [matMenuTriggerFor]="userMenu">
|
|
<mat-icon>person</mat-icon>
|
|
<span fxShow fxHide.xs>
|
|
{{userName}}
|
|
</span>
|
|
</button>
|
|
<mat-menu #userMenu="matMenu" xPosition="before" yPosition="above" [overlapTrigger]="false">
|
|
|
|
<a mat-menu-item [routerLink]="['/account/profile']">
|
|
<mat-icon>person</mat-icon>
|
|
<span>Account</span>
|
|
</a>
|
|
|
|
<a mat-menu-item [routerLink]="['/auth/login']">
|
|
<mat-icon>exit_to_app</mat-icon>
|
|
<span>Log out</span>
|
|
</a>
|
|
|
|
</mat-menu>
|
|
|
|
</mat-toolbar>
|
|
|
|
<mat-sidenav-container class="navbar-sidenav-container">
|
|
<!-- Side nav -->
|
|
<mat-sidenav #snav [opened]="!mobileQuery.matches" [mode]="mobileQuery.matches ? 'over' : 'side'"
|
|
[fixedInViewport]="mobileQuery.matches" fixedTopGap="56" class="sidenav">
|
|
|
|
<mat-nav-list>
|
|
<h3 mat-subheader>Home</h3>
|
|
|
|
<a mat-list-item [routerLink]="['/dashboard']" routerLinkActive="active">
|
|
<mat-icon matListItemIcon>
|
|
dashboard
|
|
</mat-icon>
|
|
<p mat-line> Dashboard </p>
|
|
</a>
|
|
<a mat-list-item [routerLink]="['/sales']" routerLinkActive="active">
|
|
<mat-icon matListItemIcon>
|
|
today
|
|
</mat-icon>
|
|
<p mat-line> Sales </p>
|
|
</a>
|
|
<a mat-list-item [routerLink]="['/favorites']" routerLinkActive="active">
|
|
<mat-icon matListItemIcon>
|
|
bookmark
|
|
</mat-icon>
|
|
<p mat-line> Favorites </p>
|
|
</a>
|
|
<a mat-list-item [routerLink]="['/pictures']" routerLinkActive="active">
|
|
<mat-icon matListItemIcon>
|
|
image
|
|
</mat-icon>
|
|
<p mat-line> Pictures </p>
|
|
</a>
|
|
<a mat-list-item [routerLink]="['/users']" routerLinkActive="active">
|
|
<mat-icon matListItemIcon>
|
|
people
|
|
</mat-icon>
|
|
<p mat-line> Users </p>
|
|
</a>
|
|
|
|
<!-- <a mat-list-item [routerLink]="['/customers']" routerLinkActive="active">
|
|
<mat-icon matListItemIcon>
|
|
business
|
|
</mat-icon>
|
|
<p mat-line> Customers </p>
|
|
</a>
|
|
-->
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<h3 mat-subheader>User</h3>
|
|
<a mat-list-item [routerLink]="['/account/profile']">
|
|
<mat-icon matListItemIcon>person</mat-icon>
|
|
<p mat-line> Account </p>
|
|
</a>
|
|
|
|
<a mat-list-item [routerLink]="['/auth/login']">
|
|
<mat-icon matListItemIcon>exit_to_app</mat-icon>
|
|
<p mat-line> Log out </p>
|
|
</a>
|
|
|
|
<a id="push-bottom" mat-list-item [routerLink]="['/about']" routerLinkActive="active">
|
|
<mat-icon matListItemIcon>
|
|
info_outline
|
|
</mat-icon>
|
|
<p mat-line> About </p>
|
|
</a>
|
|
</mat-nav-list>
|
|
|
|
</mat-sidenav>
|
|
|
|
<!-- Main content -->
|
|
<mat-sidenav-content class="sidenav-content">
|
|
|
|
<div class="progress-bar-container">
|
|
<mat-progress-bar color="accent" mode="indeterminate" *ngIf="spinnerService.visibility | async">
|
|
</mat-progress-bar>
|
|
<!-- <mat-spinner class="spinner" [diameter]="50" *ngIf="showSpinner"></mat-spinner> -->
|
|
</div>
|
|
|
|
|
|
<router-outlet></router-outlet>
|
|
|
|
</mat-sidenav-content>
|
|
</mat-sidenav-container>
|
|
|
|
</div> |