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

<header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="/" style="position: relative;">
    <img src="./assets/mempool-logo.png" height="35" width="140" 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: 30px;" *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>
  </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()">Blockchain</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="/contributors" (click)="collapse()">Contributors</a>
      </li>
    </ul>
    <app-search-form location="top"></app-search-form>
  </div>
</nav>
</header>

<br />

<router-outlet></router-outlet>

<br><br><br>

<app-footer></app-footer>