dynamic header or side bar sample code html

 <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>