New base code for mempool blockchain explorerer

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

@@ -0,0 +1,31 @@
+<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>
+  
+  <button class="navbar-toggler" type="button" (click)="collapse()" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  
+  <div class="navbar-collapse collapse" id="navbarCollapse" [ngClass]="{'show': navCollapsed}">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
+        <a class="nav-link" routerLink="/" (click)="collapse()">Explorer</a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="/graphs" (click)="collapse()">Graphs</a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="/tv" (click)="collapse()">TV view &nbsp;<img src="./assets/expand.png" width="15"/></a>
+      </li>
+      <li class="nav-item" routerLinkActive="active">
+        <a class="nav-link" routerLink="/about" (click)="collapse()">About</a>
+      </li>
+    </ul>
+    <app-search-form location="top"></app-search-form>
+  </div>
+</nav>
+</header>
+
+<br />
+
+<router-outlet></router-outlet>

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

@@ -0,0 +1,28 @@
+li.nav-item.active {
+  background-color: #653b9c;
+}
+
+li.nav-item {
+  padding: 10px;
+}
+
+.navbar {
+  z-index: 100;
+}
+
+@media (min-width: 768px) {
+  .navbar {
+    padding: 0rem 1rem;
+  }
+  li.nav-item {
+    padding: 20px;
+  }
+}
+
+.logo {
+  margin-left: 40px;
+}
+
+li.nav-item a {
+  color: #ffffff;
+}

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

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { StateService } from '../../services/state.service';
+
+@Component({
+  selector: 'app-master-page',
+  templateUrl: './master-page.component.html',
+  styleUrls: ['./master-page.component.scss']
+})
+export class MasterPageComponent implements OnInit {
+  navCollapsed = false;
+  isOffline = false;
+
+  constructor(
+    private stateService: StateService,
+  ) { }
+
+  ngOnInit() {
+    this.stateService.isOffline$
+      .subscribe((state) => {
+        this.isOffline = state;
+      });
+  }
+
+  collapse(): void {
+    this.navCollapsed = !this.navCollapsed;
+  }
+}