HomeMonitor/Display/src/app/components/nav/nav.component.html

<mat-toolbar color="primary">
    <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="sidenav.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>
    <span>Home Monitor</span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
    <mat-sidenav #sidenav (click)="toggleSidenav()" class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
        <mat-nav-list>
            <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
                <mat-icon matListIcon class="nav-icon">
                    home
                </mat-icon>
                <span class="nav-caption">
                    Dashboard
                </span>
            </a>

            <a routerLink="/weather-summary" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
                <mat-icon matListIcon class="nav-icon">
                    list
                </mat-icon>
                <span class="nav-caption">
                    Summary
                </span>
            </a>

            <a routerLink="/weather-charts" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
                <mat-icon matListIcon class="nav-icon">
                    multiline_chart
                </mat-icon>
                <span class="nav-caption">
                    Weather Charts
                </span>
            </a>

            <a routerLink="/power-charts" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
                <mat-icon matListIcon class="nav-icon">
                    settings_power
                </mat-icon>
                <span class="nav-caption">
                    Power Charts
                </span>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>