mirror of
https://github.com/zoriya/Kyoo.git
synced 2025-11-03 11:07:14 -05:00
68 lines
2.5 KiB
HTML
68 lines
2.5 KiB
HTML
<header id="nav">
|
|
<div class="fixed-top">
|
|
<nav id="toolbar" class="navbar navbar-dark bg-secondary flex-nowrap">
|
|
<button mat-icon-button class="icon p-0 d-sm-none" type="button" data-toggle="collapse" data-target=".mobile-nav">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
<a class="navbar-brand nav-item ml-3" routerLink="/">
|
|
Kyoo
|
|
</a>
|
|
|
|
<ul class="navbar-nav flex-row d-none d-sm-flex">
|
|
<ng-container *ngTemplateOutlet="links"></ng-container>
|
|
</ul>
|
|
|
|
<ul class="navbar-nav flex-row flex-nowrap ml-auto">
|
|
<li class="nav-item icon searchbar">
|
|
<mat-icon matTooltipPosition="below" matTooltip="Search" (click)="openSearch()">search</mat-icon>
|
|
<input placeholder="Search" id="search" type="search" (input)="onUpdateValue($any($event))"/>
|
|
</li>
|
|
|
|
<li class="nav-item" *ngIf="!this.isAuthenticated else accountDrop">
|
|
<a class="icon" (click)="this.authManager.login()" matTooltipPosition="below" matTooltip="Login">
|
|
<mat-icon>account_circle</mat-icon>
|
|
</a>
|
|
</li>
|
|
<ng-template #accountDrop>
|
|
<li #accountParent class="nav-item icon" style="opacity: 1 !important;">
|
|
<img alt="Account"
|
|
matRipple
|
|
[src]="authManager.account.picture"
|
|
[matMenuTriggerFor]="accountMenu"
|
|
class="profilePicture"
|
|
matTooltipPosition="below"
|
|
[matTooltip]="authManager.account.username"
|
|
fallback="more.svg"
|
|
(error)="accountParent.style.removeProperty('opacity');" />
|
|
</li>
|
|
<mat-menu #accountMenu="matMenu">
|
|
<button class="dropButton" mat-menu-item (click)="this.openAccountDialog()">Settings</button>
|
|
<button class="dropButton" mat-menu-item (click)="this.authManager.logout()">Logout</button>
|
|
</mat-menu>
|
|
</ng-template>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="d-sm-none navbar-dark bg-secondary">
|
|
<ul class="mobile-nav collapse navbar-nav">
|
|
<ng-container *ngTemplateOutlet="links"></ng-container>
|
|
</ul>
|
|
</div>
|
|
|
|
<mat-progress-bar *ngIf="this.isLoading" color="accent" mode="indeterminate"> </mat-progress-bar>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<router-outlet></router-outlet>
|
|
</main>
|
|
|
|
<ng-template #links>
|
|
<li class="nav-item">
|
|
<a class="nav-link" routerLink="/browse" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">All</a>
|
|
</li>
|
|
<li class="nav-item" *ngFor="let library of this.libraries">
|
|
<a class="nav-link" routerLink="/browse/{{library.slug}}" routerLinkActive="active">{{library.name}}</a>
|
|
</li>
|
|
</ng-template>
|