<div class="container-fluid">
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
<a class="navbar-brand" routerLink="/home">HRDM</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li *ngFor="let m of menuitems" [ngClass]="{'nav-item': !m.showSubItems, 'nav-item dropdown': m.showSubItems}">
<ng-container *ngIf="!m.showSubItems">
<a class="nav-link" [routerLink]="m.MenuURL">{{m.MenuName}}</a>
</ng-container>
<ng-container *ngIf="m.showSubItems">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{m.MenuName}}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" *ngFor="let s of m.SubItems" [routerLink]="s.MenuURL">{{s.MenuName}}</a>
</div>
</ng-container>
</li>
</ul>
</div>
<select name="Country" [(ngModel)]="this.role" required (change)="onRoleChange()">
<option *ngFor="let option of this.roleoptions" [value]="option">
{{ option}}
</option>
</select>
<button mat-button [matMenuTriggerFor]="menu">
<div class="circles">
{{ getInitials() }}
</div>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<table style="padding: 10px">
<tr>
<td class="d-flex justify-content-center mt-2" style="font-size: 22px; font-weight: 500">
{{ this.loginUser.DisplayName }}
</td>
</tr>
<tr>
<td class="d-flex justify-content-center" style="font-size: 18px">
{{ this.loginUser.EmailAddress }}
</td>
</tr>
<tr>
<td class="d-flex justify-content-center mt-2">
<button mat-raised-button class="btnSave" (click)="logout()">
Logout
</button>
</td>
</tr>
</table>
</mat-menu>
</nav>
</div>