From e60ad1d3fad1c55037b9a7a20e7c3288b32ca59c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Andr=C3=A9?= <sebastien.andre@arolla.fr>
Date: Wed, 29 Apr 2020 12:00:25 +0200
Subject: [PATCH] Un peu de style sur le menu de navigation

---
 .../skydivelogs-app/src/app/app.component.css |  6 +++
 .../src/app/app.component.html                | 45 ++++++++++++++-----
 .../list-of-dzs/list-of-dzs.component.html    |  8 ++--
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/Front/skydivelogs-app/src/app/app.component.css b/Front/skydivelogs-app/src/app/app.component.css
index 116d82f..48cd1fb 100644
--- a/Front/skydivelogs-app/src/app/app.component.css
+++ b/Front/skydivelogs-app/src/app/app.component.css
@@ -43,3 +43,9 @@
   cursor: pointer;
   color: #424242;
 }
+
+.navigation .splitter {
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html
index 707166d..00e85ac 100644
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/Front/skydivelogs-app/src/app/app.component.html
@@ -25,20 +25,41 @@
 
     <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
       <ul>
-        <li><a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Summary</a>
+        <li>
+          <mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon>
+          <a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Summary</a>
+          <hr class="splitter">
         </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>
+          <mat-icon aria-hidden="false" aria-label="List of jumps">list_alt</mat-icon>
+          <a routerLink="/jumps" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
+            jumps</a>
+        </li>
+        <li>
+          <mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon>
+          <a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Add a new
+            jump</a>
+          <hr class="splitter">
+        </li>
+        <li>
+          <mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon>
+          <a routerLink="/dzs" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of DZs</a>
+        </li>
+        <li>
+          <mat-icon aria-hidden="false" aria-label="Aircrafts">airplanemode_active</mat-icon>
+          <a routerLink="/aircrafts" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
+            aircrafts</a>
+        </li>
+        <li>
+          <mat-icon aria-hidden="false" aria-label="List of jump types">flight_land</mat-icon>
+          <a routerLink="/jumpTypes" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
+            jump types</a>
+        </li>
+        <li>
+          <mat-icon aria-hidden="false" aria-label="List of gears">settings_input_antenna</mat-icon>
+          <a routerLink="/gears" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
+            gears</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>
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
index fba3dee..49bac29 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
@@ -5,10 +5,10 @@
     <ng-container matColumnDef="isfavorite">
       <th mat-header-cell *matHeaderCellDef></th>
       <td mat-cell *matCellDef="let element" style="text-align: center;">
-        <img src="../../assets/img/favorite.png" alt="favorite DZ" *ngIf="element.isFavorite === true"
-          (click)="removeToFavorite(element)">
-        <img src="../../assets/img/not-favorite.png" alt="favorite DZ" *ngIf="element.isFavorite === false"
-          (click)="setToFavorite(element)">
+        <mat-icon aria-hidden="false" aria-label="Favorit" *ngIf="element.isFavorite === true"
+          (click)="removeToFavorite(element)">favorite</mat-icon>
+        <mat-icon aria-hidden="false" aria-label="Not favorite" *ngIf="element.isFavorite === false"
+          (click)="setToFavorite(element)">favorite_border</mat-icon>
       </td>
     </ng-container>