app.component.html

<div class="container is-fluid">
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <img routerLink="/" src="assets/covex_logo.png" class="menu-icon is-hoverable navbar-item logo" alt="logo"/>
      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" (click)="toggleMobileMenu()">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div class="navbar-menu" [class.is-active]="mobileWindowExpanded">
      <div class="navbar-start">
        <a routerLink="/" routerLinkActive="is-active" [routerLinkActiveOptions]="{exact: true}" class="navbar-item is-hoverable">
          <span class="icon"><i class="fa fa-home"></i></span>
          <span>Home</span>
        </a>
        <a routerLink="/explorer" routerLinkActive="is-active" class="navbar-item is-hoverable">
          <span class="icon"><i class="fa fa-project-diagram"></i></span>
          <span>Explorer</span>
        </a>
        <a routerLink="/cite" routerLinkActive="is-active" class="navbar-item is-hoverable">
          <span class="icon"><i class="fa fa-feather"></i></span>
          <span>Cite</span>
        </a>
        <a routerLink="/about" routerLinkActive="is-active" class="navbar-item is-hoverable">
          <span class="icon"><i class="fa fa-question"></i></span>
          <span>About</span>
        </a>
      </div>
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="field is-grouped">
            <p class="control">
               Version 1.1
            </p>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

<main>
  <router-outlet></router-outlet>
</main>