angular material progress bar example
Example 1: angular material toolbar with logo
<mat-toolbar color="primary">
<mat-toolbar-row>
<button mat-icon-button>
<mat-icon (click)="sidenav.toggle()">menu</mat-icon>
</button>
<h1>SimpleCRM</h1>
<span class="menu-spacer"></span>
<div>
<a mat-button [routerLink]="'/accounts'"> Accounts </a>
<a mat-button [routerLink]="'/create-account'"> Create Account </a>
<a mat-button [routerLink]="'/contacts'"> Contacts </a>
<a mat-button [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-button [routerLink]="'/activities'"> Activities </a>
<a mat-button [routerLink]="'/create-activity'"> Create Activity </a>
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<span style="font-size: 12px;">SimpleCRM helps you easily manage your contacts</span>
</mat-toolbar-row>
</mat-toolbar>
Example 2: angular material toolbar with logo
<mat-sidenav-container>
<mat-sidenav #sidenav>
<mat-nav-list>
<a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
<a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
<a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
<a mat-list-item [routerLink]="'/activities'"> Activities </a>
<a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
<a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div style="height: 88vh;">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>