toggle navbar
This commit is contained in:
parent
b3332762c5
commit
153e53e822
|
@ -8,14 +8,22 @@
|
|||
<div class="icon-bar3"></div>
|
||||
</div>
|
||||
<a class="logo"><img src="../../../assets/splash/assets/img/argos-logo.svg"></a>
|
||||
<button class="navbar-toggler ml-auto" type="button" [matMenuTriggerFor]="toggleMenu">
|
||||
<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"
|
||||
(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> -->
|
||||
<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> -->
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang"><mat-icon class="mr-2">language</mat-icon><span class="text-uppercase">{{selectedLanguage}}</span><mat-icon>arrow_drop_down</mat-icon></button>
|
||||
<button mat-button [matMenuTriggerFor]="languageMenu" class="p-0 lang">
|
||||
<mat-icon class="mr-2">language</mat-icon><span
|
||||
class="text-uppercase">{{selectedLanguage}}</span>
|
||||
<mat-icon>arrow_drop_down</mat-icon>
|
||||
</button>
|
||||
<mat-menu #languageMenu="matMenu" class="lang-parent">
|
||||
<app-language (languageChange)="getLanguage($event)"></app-language>
|
||||
</mat-menu>
|
||||
|
@ -26,8 +34,10 @@
|
|||
<ul class="navbar-nav">
|
||||
<!-- 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()"> -->
|
||||
<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'] ">
|
||||
|
@ -36,6 +46,46 @@
|
|||
</ng-template>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<mat-menu #toggleMenu="matMenu">
|
||||
<div *ngIf="!(isAuthenticated() && onInvalidUrl())">
|
||||
<ul class="list m-2">
|
||||
<li *ngIf="isAuthenticated();else loginoption" class="d-flex justify-content-center avatar">
|
||||
<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>
|
||||
<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">
|
||||
<mat-icon class="mr-2">language</mat-icon><span
|
||||
class="text-uppercase">{{selectedLanguage}}</span>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<div *ngIf="progressIndication" class="progress-bar">
|
||||
|
@ -50,4 +100,4 @@
|
|||
<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> -->
|
||||
| translate}}</a> -->
|
|
@ -100,3 +100,20 @@ $mat-card-header-size: 40px !default;
|
|||
min-height: inherit;
|
||||
max-height: inherit;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style-type:none;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.list >li {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue