<div>
  <header *ngIf="this.show()">
    <div style="display: flex; flex-wrap: nowrap; flex-direction: row; align-items: baseline;">
      <div>
        <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
          <rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
            transform="translate(31.5 58)"></rect>
          <rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
            transform="translate(31.5 44)"></rect>
          <rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
            transform="translate(31.5 30)"></rect>
        </svg>
        <h2>{{ title }}</h2>
      </div>
      <div style="text-align: right;">
        <h2 *ngIf="currentUser">{{ this.currentUser.firstName }}
          {{ this.currentUser.lastName }}</h2>
        <a *ngIf="currentUser" (click)="logout()" style="cursor: pointer;">Logout</a>
      </div>
    </div>

    <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
      <ul>
        <li><a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Summary</a>
        </li>
        <li><a routerLink="/jumps" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
            jumps</a></li>
        <li><a routerLink="/dzs" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of DZs</a>
        </li>
        <li><a routerLink="/aircrafts" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
            aircrafts</a></li>
        <li><a routerLink="/jumpTypes" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
            jump types</a></li>
        <li><a routerLink="/gears" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
            gears</a></li>
        <li><a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Add a new
            jump</a></li>
      </ul>
    </nav>
  </header>

  <body>
    <router-outlet></router-outlet>
  </body>

  <footer>footer - @Séb</footer>
</div>
