<md-toolbar color="primary" class="app-toolbar">
  <button *ngIf="isHamburgerVisible" class="hamburger" md-button (click)="sidenav.toggle()"><md-icon>menu</md-icon></button>
  <aio-top-menu *ngIf="isSideBySide" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
  <aio-search-box class="search-container" #searchBox></aio-search-box>
  <span class="fill-remaining-space"></span>
</md-toolbar>

<md-sidenav-container class="sidenav-container">

  <md-sidenav #sidenav class="sidenav" [opened]="isSideBySide" [mode] = "isSideBySide ? 'side' : 'over'">
    <div class="version-info vertical-menu-item">{{ (versionInfo | async)?.full }}</div>
    <aio-top-menu *ngIf="!isSideBySide" class="small" [nodes]="(navigationViews | async)?.TopBar" [homeImageUrl]="homeImageUrl"></aio-top-menu>
    <aio-nav-menu [nodes]="(navigationViews | async)?.SideNav" [selectedNodes]="selectedNodes | async"></aio-nav-menu>
  </md-sidenav>

  <section class="sidenav-content">
    <aio-search-results #searchResults></aio-search-results>
    <aio-doc-viewer [doc]="currentDocument | async" (docRendered)="onDocRendered($event)"></aio-doc-viewer>
  </section>
</md-sidenav-container>