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

<nav class="navbar navbar-expand-lg navbar-transparent  navbar-absolute fixed-top">
	<div class="container-fluid">
		<div class="navbar-wrapper">
			<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> -->

			<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" *ngIf="this.principalHasAvatar()" [src]="this.getPrincipalAvatar()" (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>