mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-20 13:23:20 -07:00
Updated the navigation bar
This commit is contained in:
parent
121b242159
commit
7685b6acb1
7 changed files with 29 additions and 16 deletions
|
@ -168,7 +168,7 @@
|
||||||
|
|
||||||
|
|
||||||
<div [ngClass]="user.name && roleClass()">
|
<div [ngClass]="user.name && roleClass()">
|
||||||
<app-my-nav [showNav]="showNav" [username]="user.name" (logoutClick)="logOut();"></app-my-nav>
|
<app-my-nav [showNav]="showNav" [applicationName]="applicationName" [username]="user.name" (logoutClick)="logOut();"></app-my-nav>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
|
@ -26,6 +26,7 @@ export class AppComponent implements OnInit {
|
||||||
public currentUrl: string;
|
public currentUrl: string;
|
||||||
public userAccessToken: string;
|
public userAccessToken: string;
|
||||||
public voteEnabled = false;
|
public voteEnabled = false;
|
||||||
|
public applicationName: string = "Ombi"
|
||||||
|
|
||||||
private checkedForUpdate: boolean;
|
private checkedForUpdate: boolean;
|
||||||
|
|
||||||
|
@ -63,6 +64,11 @@ export class AppComponent implements OnInit {
|
||||||
|
|
||||||
this.settingsService.getCustomization().subscribe(x => {
|
this.settingsService.getCustomization().subscribe(x => {
|
||||||
this.customizationSettings = x;
|
this.customizationSettings = x;
|
||||||
|
|
||||||
|
if (this.customizationSettings && this.customizationSettings.applicationName) {
|
||||||
|
this.applicationName = this.customizationSettings.applicationName;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.customizationSettings.useCustomPage) {
|
if (this.customizationSettings.useCustomPage) {
|
||||||
this.customPageService.getCustomPage().subscribe(c => {
|
this.customPageService.getCustomPage().subscribe(c => {
|
||||||
this.customPageSettings = c;
|
this.customPageSettings = c;
|
||||||
|
|
|
@ -26,3 +26,9 @@ export interface IUsersModel {
|
||||||
id: string;
|
id: string;
|
||||||
username: string;
|
username: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface INavBar {
|
||||||
|
icon: string;
|
||||||
|
name: string;
|
||||||
|
link: string;
|
||||||
|
}
|
|
@ -1,20 +1,11 @@
|
||||||
<mat-sidenav-container *ngIf="showNav" class="sidenav-container">
|
<mat-sidenav-container *ngIf="showNav" class="sidenav-container">
|
||||||
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
|
<mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
|
||||||
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
|
[mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="!(isHandset$ | async)">
|
||||||
<mat-toolbar>Ombi</mat-toolbar>
|
<mat-toolbar>{{applicationName}}</mat-toolbar>
|
||||||
<mat-nav-list>
|
<mat-nav-list>
|
||||||
<a mat-list-item routerLink="/discover" [routerLinkActive]="['active-list-item']" >
|
<a *ngFor="let nav of navItems" mat-list-item [routerLink]="nav.link" [routerLinkActive]="['active-list-item']" >
|
||||||
<mat-icon aria-label="Side nav toggle icon">find_replace</mat-icon>
|
<mat-icon aria-label="Side nav toggle icon">{{nav.icon}}</mat-icon>
|
||||||
Discover
|
{{nav.name | translate}}
|
||||||
</a>
|
|
||||||
<a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/search">
|
|
||||||
<mat-icon aria-label="Side nav toggle icon">search</mat-icon> Search
|
|
||||||
</a>
|
|
||||||
<a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/requests">
|
|
||||||
<mat-icon aria-label="Side nav toggle icon">list</mat-icon> Requests
|
|
||||||
</a>
|
|
||||||
<a mat-list-item [routerLinkActive]="['active-list-item']" routerLink="/Settings/About">
|
|
||||||
<mat-icon aria-label="Side nav toggle icon">settings</mat-icon> Settings
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
|
<a mat-list-item [routerLinkActive]="['active-list-item']" aria-label="Toggle sidenav" (click)="logOut();">
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||||
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { map } from 'rxjs/operators';
|
import { map } from 'rxjs/operators';
|
||||||
|
import { INavBar } from '../interfaces/ICommon';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-my-nav',
|
selector: 'app-my-nav',
|
||||||
|
@ -16,12 +17,20 @@ export class MyNavComponent {
|
||||||
);
|
);
|
||||||
|
|
||||||
@Input() public showNav: boolean;
|
@Input() public showNav: boolean;
|
||||||
|
@Input() public applicationName: string;
|
||||||
@Input() public username: string;
|
@Input() public username: string;
|
||||||
@Output() public logoutClick = new EventEmitter();
|
@Output() public logoutClick = new EventEmitter();
|
||||||
|
|
||||||
constructor(private breakpointObserver: BreakpointObserver) {
|
constructor(private breakpointObserver: BreakpointObserver) {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public navItems: INavBar[] = [
|
||||||
|
{name: "NavigationBar.Discover", icon: "find_replace", link: "/discover"},
|
||||||
|
{name: "NavigationBar.Search", icon: "search", link: "/search"},
|
||||||
|
{name: "NavigationBar.Requests", icon: "list", link: "/requests"},
|
||||||
|
{name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About"},
|
||||||
|
]
|
||||||
|
|
||||||
public logOut() {
|
public logOut() {
|
||||||
this.logoutClick.emit();
|
this.logoutClick.emit();
|
||||||
}
|
}
|
||||||
|
|
|
@ -47,6 +47,7 @@
|
||||||
"CheckPageForUpdates": "Check this page for continuous site updates."
|
"CheckPageForUpdates": "Check this page for continuous site updates."
|
||||||
},
|
},
|
||||||
"NavigationBar": {
|
"NavigationBar": {
|
||||||
|
"Discover":"Discover",
|
||||||
"Search": "Search",
|
"Search": "Search",
|
||||||
"Requests": "Requests",
|
"Requests": "Requests",
|
||||||
"UserManagement": "User Management",
|
"UserManagement": "User Management",
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue