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

97 lines
4.7 KiB
HTML
Raw Normal View History

<ng-container>
<nav class="navbar navbar-expand-lg fixed-navbar">
<div class="container-fluid">
<div class="hamburger change" id="hamburger" (click)="sidebarToggleOutput($event)">
<div class="icon-bar1"></div>
<div class="icon-bar2"></div>
<div class="icon-bar3"></div>
</div>
<a class="logo" [routerLink]="['home']"><img src="../../../assets/splash/assets/img/argos-logo-2.svg"></a>
2020-08-24 09:56:49 +02:00
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu" (mouseenter)="openMyMenu()">
2020-07-28 17:28:12 +02:00
<mat-icon class="toggle-icon">view_headline</mat-icon>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navigation">
<div class="col-md-auto" *ngIf="!(isAuthenticated() && onInvalidUrl())">
<button type="button" class="normal-btn ml-auto" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
<!-- <button type="button" class="normal-btn ml-auto" [routerLink]="['/quick-wizard']">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button> -->
2020-06-26 17:27:01 +02:00
<a class="ml-4 mr-4 faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
<!-- <button mat-icon-button class="lang" [matMenuTriggerFor]="languageMenu"></button> -->
2020-07-28 17:28:12 +02:00
<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang">
2020-08-03 10:40:38 +02:00
<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
2020-07-28 17:28:12 +02:00
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #languageMenu="matMenu" class="lang-parent">
<app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu>
</div>
2020-06-30 18:40:01 +02:00
<!-- <app-search></app-search> -->
<ul class="navbar-nav">
<!-- Login -->
<li class="nav-item" *ngIf="isAuthenticated();else loginoption">
2020-08-03 10:40:38 +02:00
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
2020-07-28 17:28:12 +02:00
<!--<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>
2020-07-28 17:28:12 +02:00
<mat-menu #toggleMenu="matMenu">
2020-08-24 09:56:49 +02:00
<div *ngIf="!(isAuthenticated() && onInvalidUrl())" (mouseleave)="closeMyMenu()">
2020-07-28 17:28:12 +02:00
<ul class="list m-2">
<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
2020-08-03 10:40:38 +02:00
<img mat-card-avatar class="my-mat-card-avatar" [src]="this.getPrincipalAvatar()" (error)="this.applyFallbackAvatar($event)" (click)="openProfile()" [matTooltip]="this.getPrincipalName()">
2020-07-28 17:28:12 +02:00
<!--<img mat-card-avatar class="my-mat-card-avatar" *ngIf="!this.principalHasAvatar()" [src]="this.getDefaultAvatar()" (click)="openProfile()"> -->
</li>
<ng-template #loginoption>
<li class="d-flex justify-content-center avatar">
<button mat-button [routerLink]=" ['/login'] " class="d-flex justify-content-center">
<span class="login-label">{{ 'GENERAL.ACTIONS.LOG-IN' | translate }}</span>
</button>
</li>
</ng-template>
<li class="ml-3 d-flex justify-content-around align-items-center" (click)="$event.stopPropagation()">
<a class="faq-title" (click)="openFaqDialog()"><b>{{ 'FAQ.TITLE' | translate }}</b></a>
<button mat-button [matMenuTriggerFor]="languageMenu" class="ml-3 p-0 lang">
2020-08-03 10:40:38 +02:00
<mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span>
2020-07-28 17:28:12 +02:00
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #languageMenu="matMenu" class="lang-parent">
<app-language (languageChange)="getLanguage($event)"></app-language>
</mat-menu>
</li>
<li class="d-flex justify-content-center">
<button type="button" class="normal-btn" (click)="openNewDmpDialog()">{{ 'NAV-BAR.START-NEW-DMP' | translate }}</button>
</li>
</ul>
</div>
</mat-menu>
2019-04-25 11:03:22 +02:00
</div>
</nav>
<div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
2019-04-25 11:03:22 +02:00
</div>
</ng-container>
<!-- 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> -->