argos/dmp-frontend/src/app/ui/navbar/navbar.component.html

104 lines
4.7 KiB
HTML

<nav class="navbar navbar-expand-lg fixed-navbar">
<div class="container-fluid">
<div class="navbar-wrapper">
<app-breadcrumb></app-breadcrumb>
<!-- <a routerLink="/home">
<i class="material-icons">dashboard</i>
</a>
<a class="navbar-brand" routerLink="/home">{{ 'NAV-BAR.BREADCRUMB-ROOT' | translate }}</a> -->
</div>
<button class="navbar-toggler" type="button" (click)="sidebarToggle()">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
<span class="navbar-toggler-icon icon-bar"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<!-- <form class="navbar-form">
<div class="input-group input-search">
<input type="text" value="" class="form-control" placeholder="SEARCH...">
<button type="submit" class="btn btn-link"><i class="material-icons">search</i></button>
</div>
</form> -->
<!-- Language
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="languageMenu">
<mat-icon>language</mat-icon>
</button>
<mat-menu #languageMenu="matMenu">
<button mat-menu-item
(click)="onLanguageSelected(languageTypes.English)">{{'NAVIGATION.ENGLISH-LANGUAGE' | translate}}</button>
<button mat-menu-item
(click)="onLanguageSelected(languageTypes.Greek)">{{'NAVIGATION.GREEK-LANGUAGE' | translate}}</button>
</mat-menu>
</div> -->
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button mat-icon-button [matMenuTriggerFor]="languageMenu" [matTooltip]="this.getCurrentLanguage().label | translate">
<mat-icon>language</mat-icon>
</button>
<mat-menu #languageMenu="matMenu" class="lang-parent">
<mat-button-toggle-group class="lang-menu" vertical (change)="onLanguageSelected($event)" [value]="this.getCurrentLanguage().value">
<div *ngFor="let lang of languages">
<mat-button-toggle class="lang-button" [value]="lang.value">{{lang.label | translate}}</mat-button-toggle>
</div>
</mat-button-toggle-group>
<!-- <button mat-menu-item *ngFor="let lang of languages" (click)="onLanguageSelected(lang)">
{{ lang.label | translate }}
</button> -->
</mat-menu>
</div>
<app-search></app-search>
<ul class="navbar-nav">
<!-- Notifications -->
<!-- <li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="material-icons md-32">notifications</i>
<span class="notification">3</span>
<p>
<span class="d-lg-none d-md-block">Some Actions</span>
</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Mike John responded to your email</a>
<a class="dropdown-item" href="#">You have 5 new tasks</a>
<a class="dropdown-item" href="#">You're now friend with Andrew</a>
<a class="dropdown-item" href="#">Another Notification</a>
<a class="dropdown-item" href="#">Another One</a>
</div>
</li> -->
<!-- Admin -->
<!-- <a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button"
routerLink="/users">{{'NAV-BAR.USERS' | translate}}</a>
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' |
translate}}</a>
<a *ngIf="isAdmin()" mat-button class="buttonNav navbar-button" routerLink="/dataset-profiles">{{'NAV-BAR.DATASETS-ADMIN'
| translate}}</a> -->
<!-- Login -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
<!-- <img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
</li>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
</ng-template>
</ul>
</div>
</div>
</nav>
<div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
</div>