<mat-sidenav-container style="height: Calc(100vh - 64px)">

    <mat-sidenav #sidenav mode="{{ (screenWidth > 840) ? 'side' : 'over'}}" opened>

        <mat-toolbar>
            <mat-toolbar-row>
                <h2 class="toolbar-title">navigation</h2>
            </mat-toolbar-row>
        </mat-toolbar>

        <mat-nav-list fxShow="true" fxHide.gt-md>
            <h2 matSubheader>toolbar menu</h2>

            <a mat-list-item routerLink="/" style="height: 0;"></a>

            <a mat-list-item [routerLink]="x.router" routerLinkActive="list-item-active" *ngFor="let x of toolbarMenuItems">
                    <mat-icon matListIcon class="app-nav-list-icon" *ngIf="x.override !== true">{{ x.icon }}</mat-icon>
                    <mat-icon matListIcon class="app-nav-list-icon lhIcon {{ x.icon }}" *ngIf="x.override === true"></mat-icon>
                    <span>{{ x.title }}</span>
            </a>
        </mat-nav-list>

        <mat-nav-list>
            <h2 matSubheader>basic nav shit</h2>

            <a mat-list-item routerLink="/" style="height: 0;"></a>

            <a mat-list-item [routerLink]="x.router" routerLinkActive="list-item-active" *ngFor="let x of sidenavMenuItems">
                <mat-icon matListIcon class="app-nav-list-icon" *ngIf="x.override !== true">{{ x.icon }}</mat-icon>
                <mat-icon matListIcon class="app-nav-list-icon lhIcon {{ x.icon }}" *ngIf="x.override === true"></mat-icon>
                <span>{{ x.title }}</span>
            </a>
        </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>