src/app/components/header/header.component.html

<mat-card>
  <mat-toolbar color="primary">
    <mat-toolbar-row>

      <button mat-menu-item style="width: 50%; align-items: center;" routerLink="/">
        <span style="color: white">CompUGE Bench</span>
      </button>

      <div style="width: 50%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 14px;">

        <button mat-menu-item style="display: flex; justify-content: center; align-items: center;" routerLink='/'>
          <span style="color: white">Home</span>
        </button>

        <button mat-menu-item [matMenuTriggerFor]="tasksMenu" style="display: flex; justify-content: center; align-items: center;">
          <mat-menu #tasksMenu="matMenu">
            <button *ngFor="let task of (stateObservable | async)?.tasks"
                    mat-menu-item
                    routerLink='/tasks/{{task.name}}'
                    style="display: flex; justify-content: center; align-items: center;">
              {{ task.name }}
            </button>
          </mat-menu>
          <span style="color: white">Tasks</span>
        </button>

        <button mat-menu-item [matMenuTriggerFor]="leaderboardsMenu" style="display: flex; justify-content: center; align-items: center;">
          <mat-menu #leaderboardsMenu="matMenu">
            <button *ngFor="let task of (stateObservable | async)?.tasks"
                    mat-menu-item
                    routerLink='/leaderboards/{{task.name}}'
                    style="display: flex; justify-content: center; align-items: center;">
              {{ task.name }}
            </button>
          </mat-menu>
          <span style="color: white">Leaderboards</span>
        </button>

        <button mat-menu-item [matMenuTriggerFor]="submissionsMenu" style="display: flex; justify-content: center; align-items: center;">
          <mat-menu #submissionsMenu="matMenu">
            <button mat-menu-item routerLink='/submissions' style="display: flex; justify-content: center; align-items: center;">
              Submissions List
            </button>

            <button mat-menu-item routerLink='/submitting' style="display: flex; justify-content: center; align-items: center;">
              Submit a Model
            </button>
          </mat-menu>
          <span style="color: white">Submissions</span>
        </button>

        <button mat-menu-item routerLink='/datasets' style="display: flex; justify-content: center; align-items: center;">
          <span style="color: white">Datasets</span>
        </button>

        <button mat-menu-item routerLink='/about' style="display: flex; justify-content: center; align-items: center;">
          <span style="color: white">About</span>
        </button>

      </div>
    </mat-toolbar-row>
  </mat-toolbar>
</mat-card>