<mat-toolbar *ngIf="!hide" [@collapseUp]="!hide" [@expandDown]="!hide" class="bg-primary">
    <mat-icon *ngIf="mobile" class="mr-2" (click)="open = !open">menu</mat-icon>
    <img src="../../../assets/icon.png" class="mr-2" height="24px" width="auto">
    <span>
        <span style="font-weight: 500;">Home Front</span>
        <small class="text-muted ml-2">v{{version}}</small>
    </span>
</mat-toolbar>
<mat-drawer-container class="fill-height" [hasBackdrop]="false">
    <mat-drawer class="bg-primary" [mode]="mobile ? 'push' : 'side'" [opened]="open" [disableClose]="!mobile" [autoFocus]="false">
        <mat-nav-list class="p-0">
            <mat-divider></mat-divider>
            <a mat-list-item routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">insert_chart</mat-icon> Dashboard</span></a>
            <mat-divider></mat-divider>
            <a mat-list-item routerLink="battery" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">{{batteryService.icon}}</mat-icon> Powerwall</span></a>
            <mat-divider></mat-divider>
            <a mat-list-item routerLink="weather" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><i [class]="'mr-2 scale-150 wi wi-fw ' + weatherService.icon"></i> Weather</span></a>
            <mat-divider></mat-divider>
            <a mat-list-item routerLink="security" routerLinkActive="active"><span class="p-3 pl-0 mr-5"><mat-icon class="mr-2">security</mat-icon> Security</span></a>
            <mat-divider></mat-divider>
            <a mat-list-item (click)="logout()"><span class="p-3 pl-0 mr-5" style="color: darkred"><mat-icon class="mr-2">logout</mat-icon> Logout</span></a>
            <mat-divider></mat-divider>
        </mat-nav-list>
    </mat-drawer>
    <mat-drawer-content class="bg-secondary text-white" (click)="open = (mobile && open) ? false : open">
        <main class="h-100" [@routerTransition]="transition(o)">
            <router-outlet #o="outlet"></router-outlet>
        </main>
    </mat-drawer-content>
</mat-drawer-container>
