Ombi/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html

<mat-sidenav-container *ngIf="showNav" class="sidenav-container">
    <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
        [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
        [opened]="!(isHandset$ | async)">
        <mat-toolbar>{{applicationName}}</mat-toolbar>
        <div class="profile-img-container">
            <img class="profile-img" src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" />
        </div>
        <mat-nav-list>
            <span *ngFor="let nav of navItems">

                <div *ngIf="(nav.requiresAdmin && isAdmin || !nav.requiresAdmin) && nav.enabled">


                    <a *ngIf="nav.externalLink" mat-list-item [href]="nav.link" target="_blank"
                        matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right"
                        [routerLinkActive]="'active-list-item'">

                        <mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style">{{nav.icon}}
                        </mat-icon>
                        <i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}"
                            style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
                        &nbsp;{{nav.name | translate}}
                    </a>
                    <a *ngIf="!nav.externalLink" mat-list-item [routerLink]="nav.link" [style]="nav.color"
                        [routerLinkActive]="'active-list-item'">

                        <mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
                        &nbsp;{{nav.name | translate}}
                    </a>
                </div>
            </span>

            <a id="nav-theme" mat-list-item (click)="switchTheme()">
                <mat-icon *ngIf="theme === 'dark'" aria-label="Side nav toggle icon">wb_incandescent</mat-icon>
                <mat-icon *ngIf="theme === 'light'" aria-label="Side nav toggle icon">brightness_4</mat-icon>
                &nbsp;{{ 'NavigationBar.ChangeTheme' | translate }}
            </a>
            <a id="nav-logout" class="bottom-nav-link" mat-list-item [routerLinkActive]="'active-list-item'"
                aria-label="Toggle sidenav" (click)="logOut();">
                <mat-icon aria-label="Side nav toggle icon">exit_to_app</mat-icon>
                &nbsp;{{ 'NavigationBar.Logout' | translate }}
            </a>


        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
                *ngIf="isHandset$ | async">
                <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
            </button>

            <div class="col-8 col-lg-10">
                <span class="justify-content-center align-items-center">
                    <!-- Search Bar -->
                    <div>
                        <app-nav-search [filter]="searchFilter"></app-nav-search>
                    </div>
                </span>
            </div>
            <div class="col-2">
                <button mat-icon-button [matMenuTriggerFor]="filterMenu"><mat-icon>filter_alt</mat-icon></button>
                <mat-menu #filterMenu="matMenu"  yPosition="below" class="smaller-panel">
                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.movies" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Movie)">{{ 'NavigationBar.Filter.Movies' | translate}}</mat-slide-toggle>
                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.tvShows" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.TvShow)">{{ 'NavigationBar.Filter.TvShows' | translate}}</mat-slide-toggle>
                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.music" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.Music)">{{ 'NavigationBar.Filter.Music' | translate}}</mat-slide-toggle>
                    <mat-slide-toggle class="mat-menu-item slide-menu" [checked]="searchFilter.people" (click)="$event.stopPropagation()" (change)="changeFilter($event,SearchFilterType.People)">{{ 'NavigationBar.Filter.People' | translate}}</mat-slide-toggle>
                  </mat-menu>
            </div>

        </mat-toolbar>



        <!-- Page -->
        <ng-container *ngTemplateOutlet="template"></ng-container>


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

<div *ngIf="!showNav">
    <ng-container *ngTemplateOutlet="template"></ng-container>
</div>

<ng-template #template>
    <router-outlet> </router-outlet>
</ng-template>