argos/dmp-frontend/src/app/shared/components/navigation/navigation.component.html

53 lines
2.5 KiB
HTML

<mat-toolbar color="primary">
<a class="app-logo" routerLink="/">
<img [src]="'/assets/images/openDmps.png'" alt="openDMPS">
</a>
<div *ngIf="isAuthenticated()">
<button mat-button class="navbar-button" routerLink="/projects">{{this.languageResolver.getBy('navbar') | translate}}</button>
<button mat-button class="navbar-button" routerLink="/dmps">{{'NAV-BAR.DMPS' | translate}}</button>
<button mat-button class="navbar-button" routerLink="/datasets">{{'NAV-BAR.DATASETS' | translate}}</button>
<button *ngIf="isAdmin()" mat-button class="navbar-button" routerLink="/users">{{'NAV-BAR.USERS' | translate}}</button>
<button *ngIf="isAdmin()" mat-button class="navbar-button" routerLink="/dmp-profiles">{{'NAV-BAR.DMP-PROFILES' | translate}}</button>
<button *ngIf="isAdmin()" mat-button class="navbar-button" routerLink="/datasetsProfiles">{{'NAV-BAR.DATASETS-ADMIN'
| translate}}</button>
</div>
<div *ngIf="!isAuthenticated()">
<button mat-button class="navbar-button" routerLink="/datasets/public">{{'NAV-BAR.PUBLIC-DATASETS' | translate}}</button>
</div>
<!--<button mat-button class="navbar-button" routerLink="/about">{{'NAV-BAR.ABOUT' | translate}}</button>-->
<span class="navbar-spacer"></span>
<div fxFlex *ngIf="search && this.isAuthenticated()">
<mat-form-field class="full-width" floatLabel="never">
<input type="text" placeholder="{{'DASHBOARD.SEARCH' | translate}}" matInput [formControl]="searchControl" [matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onOptionSelected($event)">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
{{option.label}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div fxLayout="row">
<div fxFlex *ngIf="!search && this.isAuthenticated()">
<button mat-button (click)="this.search = true">
<mat-icon>search</mat-icon>
</button>
</div>
<div fxFlex *ngIf="search && this.isAuthenticated()">
<button mat-button (click)="this.search = false">
<mat-icon>close</mat-icon>
</button>
</div>
<div fxFlex *ngIf="isAuthenticated();else loginoption">
<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (click)="openProfile()">
</div>
</div>
<ng-template #loginoption>
<button mat-button [routerLink]=" ['/login'] ">
<span class="login-label">Log in</span>
</button>
</ng-template>
</mat-toolbar>