<div>{{this.manQueryParam}}</div>
<div>{{this.pageQueryParam}}</div>
<div>{{this.wordQueryParam}}</div>
<mat-card>
  <nav mat-tab-nav-bar>
    <a mat-tab-link
       *ngFor="let link of navTabLinks"
       [routerLink]="link.link"
       [queryParams]="{'man': manQueryParam, 'page': pageQueryParam, 'word': wordQueryParam}"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive">
        {{link.label}}
    </a>
  </nav>
</mat-card>
<mat-drawer-container style="height: 100%; min-height: 500px" [hasBackdrop]= false>
  <mat-drawer [mode]="navBarOpenMode" [position] ="orientation" [disableClose]="false" [opened]="navBarOpenState">
    <mat-card class="sidenav-drawer" style="display: table-row">
      <div class="content-container">
        <app-navigation-list-component [navTreeData]="navTreeData"></app-navigation-list-component>
      </div>
      <div class="button-container" *ngIf="navBarOpenMode === 'over'">
        <button mat-raised-button class="toggle-button" (click)="toggleDrawer()">
          <mat-icon class="mat-accent">{{ navBarOpenState ? 'chevron_left' : 'chevron_right' }}</mat-icon>
        </button>
      </div>
    </mat-card>
  </mat-drawer>
  <mat-drawer-content style="display: table">
    <div class="button-container">
      <button mat-raised-button class="toggle-button" (click)="toggleDrawer()">
        <mat-icon class="mat-accent">{{ navBarOpenState ? 'chevron_left' : 'chevron_right' }}</mat-icon>
      </button>
    </div>
    <div class="content-container">
      <router-outlet></router-outlet>
    </div>
  </mat-drawer-content>
</mat-drawer-container>
<!--
<mat-drawer-container id="sidenav-container" [hasBackdrop]= false >
  <mat-drawer id="sidenav-drawer" mode="over" position ="end" [disableClose]="true" [opened]="openState">
    <div class="content-area">
      <div class="indrawer-toggle-button-container">
        <button mat-raised-button class="toggle-button" (click)="toggleDrawer()">
          <mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left'  }}</mat-icon>
        </button>
      </div>
      <div class="indrawer-content-container">
        <app-info-box [manuscript]="manuscript"></app-info-box>
      </div>
    </div>
  </mat-drawer>
  <mat-drawer-content id="main-content-container">
    <div class="content-area">
      <div class="content-container">
        <router-outlet></router-outlet>
      </div>
      <div class = "toggle-button-container">
        <button mat-raised-button class="toggle-button" (click)="toggleDrawer()">
          <mat-icon class="mat-accent">{{ openState ? 'chevron_right' : 'chevron_left'  }}</mat-icon>
        </button>
      </div>
    </div>
  </mat-drawer-content>
</mat-drawer-container>
-->