Adding a third connection state and preventing offline indicator from pushing the menu.

frontend/src/app/components/master-page/master-page.component.html

@@ -1,6 +1,10 @@
 <header>
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
-  <a class="navbar-brand" routerLink="/"><img src="./assets/mempool-space-logo.png" width="180" class="logo"> <span class="badge badge-warning" style="margin-left: 10px;" *ngIf="isOffline">Offline</span></a>
+  <a class="navbar-brand" routerLink="/" style="position: relative;">
+    <img src="./assets/mempool-space-logo.png" width="180" class="logo" [ngStyle]="{'opacity': connectionState === 2 ? 1 : 0.5 }">
+    <div class="badge badge-warning connection-badge" *ngIf="connectionState === 0">Offline</div>
+    <div class="badge badge-warning connection-badge" style="left: 60px;" *ngIf="connectionState === 1">Reconnecting...</div>
+  </a>
   
   <button class="navbar-toggler" type="button" (click)="collapse()" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

frontend/src/app/components/master-page/master-page.component.scss

@@ -27,4 +27,11 @@ li.nav-item a {
 
 nav {
   box-shadow: 0px 0px 15px 0px #000;
+}
+
+.connection-badge {
+  margin-left: 10px;
+  position: absolute;
+  top: 10px;
+  left: 100px;
 }

frontend/src/app/components/master-page/master-page.component.ts

@@ -8,16 +8,16 @@ import { StateService } from '../../services/state.service';
 })
 export class MasterPageComponent implements OnInit {
   navCollapsed = false;
-  isOffline = false;
+  connectionState = 2;
 
   constructor(
     private stateService: StateService,
   ) { }
 
   ngOnInit() {
-    this.stateService.isOffline$
+    this.stateService.connectionState$
       .subscribe((state) => {
-        this.isOffline = state;
+        this.connectionState = state;
       });
   }