SkydiveLogs/Front/skydivelogs-app/src/app/app.component.html

<mat-toolbar *ngIf="this.show()">
  <button mat-icon-button (click)="snav.toggle()">
    <mat-icon>menu</mat-icon>
  </button>
  <h2>{{ title }}</h2>

  <mat-select
    [(value)]="selectedLanguageFlag"
    (selectionChange)="switchLang($event)"
    style="margin-left: 50px; width: 100px"
  >
    <mat-select-trigger>
      <img
        src="{{ 'assets/img/' + selectedLanguageFlag + '.svg' }}"
        style="width: 30px"
      />
    </mat-select-trigger>
    <mat-option value="fr">
      <img src="assets/img/fr.svg" style="width: 30px" />
    </mat-option>
    <mat-option value="en">
      <img src="assets/img/en.svg" style="width: 30px" />
    </mat-option>
  </mat-select>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="Summary"
        fontIcon="timeline"
      ></mat-icon>
      <a
        routerLink="/summary"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_Summary" | translate }}</a
      >
      <hr class="splitter" />
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="List of jumps"
        fontIcon="list_alt"
      ></mat-icon>
      <a
        routerLink="/jumps"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_Jumps" | translate }}</a
      >
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="Add jumps"
        fontIcon="add_circle"
      ></mat-icon>
      <a
        routerLink="/newjump"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_NewJump" | translate }}</a
      >
      <hr class="splitter" />
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="List of tunnel flights"
        fontIcon="list_alt"
      ></mat-icon>
      <a
        routerLink="/tunnelFlights"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_TunnelFlights" | translate }}</a
      >
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="Add flights in tunnel"
        fontIcon="add_circle"
      ></mat-icon>
      <a
        routerLink="/newTunnelFlight"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_NewTunnelFlight" | translate }}</a
      >
      <hr class="splitter" />
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="Dropzones"
        fontIcon="store"
      ></mat-icon>
      <a
        routerLink="/dzs"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_Dzs" | translate }}</a
      >
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="Aircrafts"
        fontIcon="airplanemode_active"
      ></mat-icon>
      <a
        routerLink="/aircrafts"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_Aircrafts" | translate }}</a
      >
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="List of jump types"
        fontIcon="flight_land"
      ></mat-icon>
      <a
        routerLink="/jumpTypes"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_JumpTypes" | translate }}</a
      >
    </mat-nav-list>
    <mat-nav-list>
      <mat-icon
        aria-hidden="false"
        aria-label="List of gears"
        fontIcon="settings_input_antenna"
      ></mat-icon>
      <a
        routerLink="/gears"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
        >{{ "App_Nav_Gears" | translate }}</a
      >
    </mat-nav-list>
    <mat-nav-list *ngIf="currentUser">
      <hr class="splitter" />
      <mat-icon
        aria-hidden="false"
        aria-label="User account"
        fontIcon="account_box"
      ></mat-icon>
      <a
        routerLink="/user"
        routerLinkActive="active"
        (click)="snav.toggle()"
        skipLocationChange
      >
        {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
      </a>
    </mat-nav-list>
    <mat-nav-list *ngIf="currentUser">
      <mat-icon
        aria-hidden="false"
        aria-label="To logout"
        fontIcon="logout"
      ></mat-icon>
      <span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
        "App_Nav_Logout" | translate
      }}</span>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <router-outlet></router-outlet>
    <footer style="text-align: right">
      {{ "App_Footer" | translate }}{{ version }} - &#64;Séb
    </footer>
  </mat-sidenav-content>
</mat-sidenav-container>