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

<mat-toolbar color="primary">
	<a [fxLayoutAlign]="'center'" 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>
	<!--<button mat-button class="navbar-button" routerLink="/about">{{'NAV-BAR.ABOUT' | translate}}</button>-->

	<span class="navbar-spacer"></span>
	<div *ngIf="isAuthenticated();else loginoption">
		<img mat-card-avatar *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()">
		<span class="user-label">{{this.getPrincipalName()}}</span>
		<button mat-icon-button class="navbar-icon" (click)="logout()">
			<mat-icon class="navbar-icon">exit_to_app</mat-icon>
		</button>
	</div>
	<ng-template #loginoption>
		<button mat-button [routerLink]=" ['/login'] ">
			<span class="login-label">Log in</span>
		</button>
	</ng-template>
</mat-toolbar>