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="./resources/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>

  <div class="btn-group" style="margin-right: 16px;">
    <button type="button" (click)="networkDropdownHidden = !networkDropdownHidden" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" [class.d-block]="!networkDropdownHidden">
      <a class="dropdown-item mainnet" [class.active]="network === ''" routerLink="/">Mainnet</a>
      <a class="dropdown-item liquid" [class.active]="network === 'liquid'" routerLink="/liquid">Liquid</a>
      <a class="dropdown-item testnet" [class.active]="network === 'testnet'" routerLink="/testnet">Testnet</a>
      </div>
  </div>

  <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 {{ network }}">
      <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        <a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()">Blockchain</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [routerLink]="['/graphs' | relativeUrl]" (click)="collapse()">Graphs</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [routerLink]="[tvViewRoute]" (click)="collapse()">TV view &nbsp;<img src="./resources/expand.png" width="15"/></a>
      </li>
      <li *ngIf="network === 'liquid'" class="nav-item" routerLinkActive="active">
        <a class="nav-link" [routerLink]="['/assets' | relativeUrl]" (click)="collapse()">Assets</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" [routerLink]="['/contributors' | relativeUrl]" (click)="collapse()">Contributors</a>
      </li>
    </ul>
    <app-search-form location="top" (searchTriggered)="collapse()"></app-search-form>
  </div>
</nav>
</header>

<br />

<router-outlet></router-outlet>

<br><br><br>

<app-footer></app-footer>