docker-sites-status-server/frontend/SiteStatus/src/app/app.component.html

<mat-sidenav-container class="all-wrap" fullscreen>
    <mat-sidenav [mode]="uiStatus.sideMenu.mode" [opened]="uiStatus.sideMenu.opened" #sidenav>
        <header>
            <mat-toolbar color="primary">
                {{ 'common.appName' | translate }}
            </mat-toolbar>
        </header>
        <!--<h4>Test</h4>-->
        <mat-list class="sidenav-menu">
            <mat-list-item class="sidenav-menu-title">{{ 'common.appName' | translate }}</mat-list-item>
            <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-item">HOME</a></mat-list-item>
            <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-item">SOME STUFF  <mat-icon>keyboard_arrow_down</mat-icon></a></mat-list-item>
            <div style="height: auto; overflow: hidden">
                <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-sub-item">SUB STUFF 1</a></mat-list-item>
                <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-sub-item">SUB STUFF 2</a></mat-list-item>
                <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-sub-item">SUB STUFF 3</a></mat-list-item>
            </div>
            <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-item">SOME OTHER STUFF  <mat-icon >keyboard_arrow_down</mat-icon></a></mat-list-item>
            <div style="height: auto; overflow: hidden">
                <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-sub-item">SUB STUFF 1</a></mat-list-item>
                <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-sub-item">SUB STUFF 2</a></mat-list-item>
                <mat-list-item><a [routerLink]="['/']" mat-button class="sidenav-menu-btn-sub-item">SUB STUFF 3</a></mat-list-item>
            </div>
        </mat-list>
    </mat-sidenav>

    <div class="page-wrap">
        <header role="banner">
            <mat-toolbar color="primary">
                <button *ngIf="uiStatus.toolbar.displayMenuButton"
                        type="button"
                        mat-icon-button
                        (click)="sidenav.open()"
                        title="Open sidenav">
                    <mat-icon>menu</mat-icon>
                </button>
                {{ 'common.appName' | translate }}
            </mat-toolbar>
        </header>
        <main class="content">
            <router-outlet></router-outlet>
        </main>
        <footer [innerHTML]="'common.footer' | translate">
        </footer>
    </div>
</mat-sidenav-container>

<ng-template #cgBusyTemplate let-options="options">
    <div class="custom-template">
        <mat-progress-bar mode="indeterminate">
        </mat-progress-bar>
    </div>
</ng-template>