Le nom de la page clickable pour afficher le menu

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

@@ -1,195 +1,200 @@
 @if (this.show()) {
-  <mat-toolbar>
-    <mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
-    <h2>{{ translatedTitle }}</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-toolbar>
+        <h2 (click)="snav.toggle()">
+            <mat-icon svgIcon="menu"></mat-icon>
+            {{ translatedTitle }}
+        </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"
-        svgIcon="summary"
-      ></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"
-        svgIcon="list"
-      ></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"
-        svgIcon="add"
-      ></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"
-        svgIcon="list"
-      ></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"
-        svgIcon="add"
-      ></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"
-        svgIcon="dz"
-      ></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"
-        svgIcon="aircraft"
-      ></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"
-        svgIcon="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"
-        svgIcon="gear"
-      ></mat-icon>
-      <a
-        routerLink="/gears"
-        routerLinkActive="active"
-        (click)="snav.toggle()"
-        skipLocationChange
-        >{{ "App_Nav_Gears" | translate }}</a
-      >
-    </mat-nav-list>
-    @if (currentUser) {
-      <mat-nav-list>
-        <hr class="splitter" />
-        <mat-icon
-          aria-hidden="false"
-          aria-label="User account"
-          svgIcon="account"
-        ></mat-icon>
-        <a
-          routerLink="/user"
-          routerLinkActive="active"
-          (click)="snav.toggle()"
-          skipLocationChange
-        >
-          {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
-        </a>
-      </mat-nav-list>
-    }
-    @if (currentUser) {
-      <mat-nav-list>
-        <mat-icon
-          aria-hidden="false"
-          aria-label="To logout"
-          svgIcon="logout"
-        ></mat-icon>
-        <span (click)="snav.toggle(); logout()" style="cursor: pointer">{{
-          "App_Nav_Logout" | translate
-        }}</span>
-      </mat-nav-list>
-    }
-  </mat-sidenav>
+    <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
+        <mat-nav-list>
+            <mat-icon
+                aria-hidden="false"
+                aria-label="Summary"
+                svgIcon="summary"
+            ></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"
+                svgIcon="list"
+            ></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"
+                svgIcon="add"
+            ></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"
+                svgIcon="list"
+            ></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"
+                svgIcon="add"
+            ></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"
+                svgIcon="dz"
+            ></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"
+                svgIcon="aircraft"
+            ></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"
+                svgIcon="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"
+                svgIcon="gear"
+            ></mat-icon>
+            <a
+                routerLink="/gears"
+                routerLinkActive="active"
+                (click)="snav.toggle()"
+                skipLocationChange
+                >{{ "App_Nav_Gears" | translate }}</a
+            >
+        </mat-nav-list>
+        @if (currentUser) {
+            <mat-nav-list>
+                <hr class="splitter" />
+                <mat-icon
+                    aria-hidden="false"
+                    aria-label="User account"
+                    svgIcon="account"
+                ></mat-icon>
+                <a
+                    routerLink="/user"
+                    routerLinkActive="active"
+                    (click)="snav.toggle()"
+                    skipLocationChange
+                >
+                    {{ this.currentUser.firstName }}
+                    {{ this.currentUser.lastName }}
+                </a>
+            </mat-nav-list>
+        }
+        @if (currentUser) {
+            <mat-nav-list>
+                <mat-icon
+                    aria-hidden="false"
+                    aria-label="To logout"
+                    svgIcon="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-content>
+        <router-outlet></router-outlet>
+        <footer style="text-align: right">
+            {{ "App_Footer" | translate }}{{ version }} - &#64;Séb
+        </footer>
+    </mat-sidenav-content>
 </mat-sidenav-container>