Refactor header style.

src/app/core/components/header/header.component.html

@@ -1,4 +1,5 @@
 <nav *ngIf="!selectionMode">
+  <div class="left">
     <span class="title">
       <img src="../../assets/images/to-do.png" />
       To Do
@@ -16,6 +17,18 @@
         matTooltip="Retourner aux task-lists">
       <mat-icon>chevron_left</mat-icon>
     </button>
+  </div>
+  <div class="middle">
+    test
+  </div>
+  <div class="right">
+    <button class="icon raised"
+        (click)="enableSelectionMode()"
+        matTooltip="Activer la sélection des task-lists"
+        matTooltipPosition="left">
+      <mat-icon>checklist_rtl</mat-icon>
+    </button>
+  </div>
 </nav>
 <nav *ngIf="selectionMode" class="selectionMode">
   <div></div>

src/app/core/components/header/header.component.scss

@@ -8,6 +8,33 @@ nav {
   height: 3.2rem;
   background-color: #666;
 
+  .left {
+    position: absolute;
+    left: 1rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    .title {
+      font-size: 1.5rem;
+      display: flex;
+      align-items: center;
+      margin-right: 1rem;
+    }
+
+    
+  }
+
+  .middle {
+    display: flex;
+    margin: auto;
+  }
+
+  .right {
+    position: absolute;
+    right: 1rem;
+  }
+  
   &.selectionMode {
     font-weight: bold;
     background-color: #185eb4;
@@ -21,11 +48,4 @@ nav {
       margin: 0 1rem;
     }
   }
-
-  .title {
-    font-size: 1.5rem;
-    margin: 0 1rem;
-    display: flex;
-    align-items: center;
-  }
 }

src/app/core/components/header/header.component.ts

@@ -46,6 +46,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this._taskListService.removeActiveTaskList();
   }
 
+  enableSelectionMode(): void {
+    this._taskListService.enableSelectionMode();
+  }
+
   disableSelectionMode(): void {
     this._taskListService.disableSelectionMode();
   }