quartz-manager/quartz-manager-frontend/src/app/components/header/header.component.html

<mat-toolbar color="primary" class="app-navbar">
  <button mat-button mat-ripple routerLink="/">
    <img alt="Quartz Manager" class="app-angular-logo" src="assets/image/angular-white-transparent.svg">
    <span>Quartz Manager</span>
  </button>

  <div class="right">
    <div fxFlex="1 1 auto" fxLayout="row" fxLayoutAlign="flex-end center">
      <button *ngIf="!hasSignedIn()" routerLink="/login" mat-button mat-ripple>
        <span>Login</span>
      </button>
      <button
        class="greeting-button"
        *ngIf="hasSignedIn()"
        mat-button mat-ripple
        [matMenuTriggerFor]="accountMenu">
        <span>Hi, {{userName()}}</span>
      </button>
      <button
        class="greeting-hamburger"
        *ngIf="hasSignedIn()"
        mat-icon-button mat-ripple
        [matMenuTriggerFor]="accountMenu">
        <mat-icon>menu</mat-icon>
      </button>
      <mat-menu #accountMenu
        class="app-header-accountMenu"
        yposition="below"
        [overlapTrigger]="false">
        <app-account-menu ></app-account-menu>
      </mat-menu>
    </div>
  </div>
</mat-toolbar>