Add help (doc) button in navbar when calculators list is empty

src/app/app.component.html

@@ -56,6 +56,9 @@
     <button *ngIf="currentRoute != '/list'" mat-icon-button id="new-calculator" routerLink="/list" (click)="sidenav.close()">
       <mat-icon>add_box</mat-icon>
     </button>
+    <a *ngIf="enableHeaderDoc" target="_blank" id="header-doc" href="/assets/docs-fr/index.html" (click)="sidenav.close()">
+      <mat-icon>help</mat-icon>
+    </a>
 
     <mat-progress-bar *ngIf="showProgressBar" color="accent" id="loading-progress-bar"
       [mode]="progressBarMode" [value]="progessBarValue">

src/app/app.component.scss

@@ -55,6 +55,16 @@ button:focus {
     }
 }
 
+#header-doc {
+    color: white;
+    transform: scale(1.4);
+    margin-top: 10px;
+
+    &:focus {
+        outline: 0;
+    }
+}
+
 #tabs-container {
     width: 100%;
 }

src/app/app.component.ts

@@ -272,6 +272,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     this.progressBarDeterminate = ! show;
   }
 
+  public get enableHeaderDoc() {
+    return this.currentRoute === "/list" && this._calculators.length === 0;
+  }
+
   // interface Observer
 
   update(sender: any, data: any): void {