mirror of https://github.com/Ombi-app/Ombi
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
5.4 KiB
115 lines
5.4 KiB
<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">{{applicationName}}</mat-toolbar>
|
|
|
|
<div class="outer-profile">
|
|
<div class="profile-img-container">
|
|
<div class="profile-img">
|
|
<img
|
|
src="https://www.gravatar.com/avatar/{{emailHash}}?d={{applicationLogo ? applicationLogo : 'https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png'}}" />
|
|
</div>
|
|
<div class="profile-info">
|
|
<h3>{{username}}</h3>
|
|
<p>{{welcomeText | translate}}</p>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
{{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>
|
|
{{nav.name | translate}}
|
|
</a>
|
|
</div>
|
|
</span>
|
|
|
|
<a id="nav-logout" 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>
|
|
{{ '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 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">
|
|
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
|
|
</button>
|
|
|
|
<div class="col-8 col-lg-10 top-search-bar">
|
|
<span class="justify-content-center align-items-center">
|
|
<!-- Search Bar -->
|
|
<div>
|
|
<app-nav-search></app-nav-search>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
<div class="col-2 top-filter">
|
|
<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> |