app.component.html

<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <a class="navbar-brand" routerLink="/">{{title}}</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" routerLink="/teams" routerLinkActive="active">Teams</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/players" routerLinkActive="active">Players</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" routerLink="/games" routerLinkActive="active">Games</a>
        </li>

        <li *ngIf="isTeamManager" class="nav-item">
            <a class="nav-link" routerLink="/team/manage" routerLinkActive="active">Manage Team</a>
        </li>
        <li *ngIf="this.isLeagueManager" class="nav-item">
            <a class="nav-link" routerLink="/team/create" routerLinkActive="active">Add Team</a>
        </li>
        <li *ngIf="this.isLeagueManager" class="nav-item">
            <a class="nav-link" routerLink="/game/create" routerLinkActive="active">Schedule Match</a>
        </li>
      </ul>
      <div class="d-flex">
        <mat-action-row>
          <button (click)="handleLogInClick()" [disabled]="isAuthenticated" color="primary" class="btn btn-light">Log in</button>
          <button (click)="handleLogOutClick()" [disabled]="!isAuthenticated" color="primary" class="btn btn-light">Log out
          </button>
        </mat-action-row>
      </div>
    </div>
  </div>
</nav>

<router-outlet></router-outlet>