TV full screen view.

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

@@ -0,0 +1,32 @@
+<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" [ngClass]="{'active': txActive.isActive}" [routerLinkActiveOptions]="{exact: true}">
+        <a class="nav-link" routerLink="/" (click)="collapse()">Blocks</a>
+        <a class="nav-link" routerLink="/tx" routerLinkActive #txActive="routerLinkActive" style="display: none;"></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="/about" (click)="collapse()">About</a>
+      </li>
+    </ul>
+    <form [formGroup]="searchForm" class="form-inline mt-2 mt-md-0 mr-4" (submit)="searchForm.valid && search()" novalidate>
+      <input formControlName="txId" required style="width: 300px;" class="form-control mr-sm-2" type="text" placeholder="Track transaction (TXID)" aria-label="Search">
+      <button class="btn btn-primary my-2 my-sm-0" type="submit">Track</button>
+    </form>
+  </div>
+</nav>
+</header>
+
+<br />
+
+<router-outlet></router-outlet>

frontend/src/app/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/master-page/master-page.component.ts

@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import { MemPoolService } from '../services/mem-pool.service';
+import { Router } from '@angular/router';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-master-page',
+  templateUrl: './master-page.component.html',
+  styleUrls: ['./master-page.component.scss']
+})
+export class MasterPageComponent implements OnInit {
+
+  navCollapsed = false;
+  isOffline = false;
+  searchForm: FormGroup;
+
+  constructor(
+    private memPoolService: MemPoolService,
+    private router: Router,
+    private formBuilder: FormBuilder,
+  ) { }
+
+  ngOnInit() {
+    this.searchForm = this.formBuilder.group({
+      txId: ['', Validators.pattern('^[a-fA-F0-9]{64}$')],
+    });
+
+    this.memPoolService.isOffline$
+      .subscribe((state) => {
+        this.isOffline = state;
+      });
+  }
+
+  collapse(): void {
+    this.navCollapsed = !this.navCollapsed;
+  }
+
+  search() {
+    const txId = this.searchForm.value.txId;
+    if (txId) {
+      if (window.location.pathname === '/' || window.location.pathname.substr(0, 4) === '/tx/') {
+        window.history.pushState({}, '', `/tx/${txId}`);
+      } else {
+        this.router.navigate(['/tx/', txId]);
+      }
+      this.memPoolService.txIdSearch$.next(txId);
+      this.searchForm.setValue({
+        txId: '',
+      });
+      this.collapse();
+    }
+  }
+
+}