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 class="application-name" id="nav-applicationName">
            <a *ngIf="applicationUrl; else noApplicationUrlLogo" class="application-name-link" [href]="applicationUrl">{{applicationName}}</a>
        </mat-toolbar>
        <ng-template #noApplicationUrlLogo>
            {{applicationName}}
        </ng-template>

        <mat-nav-list>
            <span  mat-list-item  *ngFor="let nav of navItems">

                <div class="menu-spacing mat-ripple" mat-ripple *ngIf="(nav.requiresAdmin && isAdmin || !nav.requiresAdmin) && nav.enabled">
                    <!-- External -->
                    <a [disableRipple]="true" mat-list-item  id="{{nav.id}}" *ngIf="nav.externalLink" [href]="nav.link" target="_blank"
                        matTooltip="{{nav.toolTipMessage | translate}}" matTooltipPosition="right"
                        [routerLinkActive]="'active-list-item'">

                        <i *ngIf="nav.icon" class="fa-lg {{nav.icon}} icon-spacing"
                            style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
                        &nbsp;{{nav.name | translate}}
                    </a>

                    <!-- Internal -->
                    <ng-container *ngIf="nav.id === 'nav-discover'">
                        <em class="advanced-search fa-lg fas fa-filter " (click)="openAdvancedSearch()" [routerLinkActive]="'active-advanced'" [routerLink]="nav.link"></em>
                    </ng-container>
                    <a [disableRipple]="true" mat-list-item id="{{nav.id}}" *ngIf="!nav.externalLink" [routerLink]="nav.link" [style]="nav.style"
                        [routerLinkActive]="'active-list-item'">

                        <i class="fa-lg {{nav.icon}} icon-spacing"></i>
                        &nbsp;{{nav.name | translate}}
                    </a>
                </div>
            </span>

            <span mat-list-item >
            <a mat-list-item [disableRipple]="true" id="nav-openMobile" [routerLinkActive]="'active-list-item'"
                aria-label="Toggle sidenav" (click)="openMobileApp($event);">
                <i class="fa-lg fas fa-mobile-alt  icon-spacing"></i>
                &nbsp;{{ 'NavigationBar.OpenMobileApp' | translate }}
            </a></span>

            <a mat-list-item [disableRipple]="true"   class="menu-spacing" id="nav-logout" [routerLinkActive]="'active-list-item'"
                aria-label="Toggle sidenav" (click)="logOut();">
                <i class="fa-lg fas fa-sign-out-alt  icon-spacing"></i>
                &nbsp;{{ 'NavigationBar.Logout' | translate }}
            </a>


        </mat-nav-list>

        <div class="bottom-nav full">
            <div class="outer-profile">
                <app-remaining-requests [type]="RequestType.movie"></app-remaining-requests>
                <app-remaining-requests [type]="RequestType.tvShow"></app-remaining-requests>
                <app-remaining-requests [type]="RequestType.album"></app-remaining-requests>
        </div>
        </div>
    </mat-sidenav>

    <mat-sidenav-content autosize class="content-container">
        <mat-toolbar color="primary" class="top-bar-container">
            <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
                *ngIf="isHandset$ | async">
                <i class="fa-lg fas fa-bars"></i>
            </button>

            <div class="top-search-block">
                    <!-- Search Bar -->
                    <div class="top-search-bar">
                        <app-nav-search></app-nav-search>
                    </div>
                    <button id="search-filter" mat-icon-button [matMenuTriggerFor]="filterMenu">
                        <i class="fa-lg fas fa-filter"></i>
                    </button>
                    <mat-menu #filterMenu="matMenu" yPosition="below" class="smaller-panel">
                        <mat-slide-toggle id="filterMovies" 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 id="filterTv" 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 *ngIf="musicEnabled$ | async" id="filterMusic" 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>
            <div class="profile-block">
                <a routerLink="/user-preferences">
                <div class="profile-username" data-test="profile-username">{{userName}}</div>
                <div class="profile-img" data-test="profile-image">
                    <img [src]="userProfileImageUrl" (error)="onProfileImageError()" >
                </div>
            </a>
            </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>