dev@190: <div class="app-container">
dev@190:   <div class="app-header">
dev@190:     <md-toolbar color="primary">
dev@190:       <md-icon svgIcon="duck"></md-icon>
dev@102: 
dev@190:       <span class="app-toolbar-filler"></span>
dev@102: 
dev@190:       <app-playback-control></app-playback-control>
dev@190:       <ugly-recording-control
dev@190:         (finishedRecording)="onFileOpened($event)"
dev@190:       ></ugly-recording-control>
dev@102: 
dev@190:       <!-- This fills the remaining space of the current row -->
dev@190:       <span class="app-toolbar-filler"></span>
dev@1: 
dev@13: 
dev@190:       <app-audio-file-open
dev@190:         (fileOpened)="onFileOpened($event)"
dev@190:       ></app-audio-file-open>
dev@190:       <!-- menu opens when trigger button is clicked -->
dev@190:       <button md-icon-button (click)="sidenav.toggle()">
dev@190:         <md-icon>extension</md-icon>
dev@190:       </button>
dev@190:     </md-toolbar>
dev@190:   </div>
dev@7: 
dev@190:   <div class="app-content">
dev@190:     <md-sidenav-container>
dev@190:       <md-sidenav #sidenav align="start" mode="over">
dev@190:         <app-feature-extraction-menu
dev@190:           (requestOutput)="extractFeatures($event)"
dev@190:           [disabled]="!canExtract">
dev@190:         </app-feature-extraction-menu>
dev@190:       </md-sidenav>
dev@190:       <ugly-notebook-feed
dev@203:         [analyses]="analyses"
dev@203:         [rootAudioUri]="rootAudioUri"></ugly-notebook-feed>
dev@190:     </md-sidenav-container>
dev@190:   </div>
dev@190: 
dev@190:   <div class="app-footer">
dev@190:     <md-toolbar color="primary">
dev@190: 
dev@190:       <!-- menu opens when trigger button is clicked -->
dev@190:       <button md-icon-button (click)="sidenav.toggle()">
dev@190:         <md-icon>extension</md-icon>
dev@190:       </button>
dev@190:     </md-toolbar>
dev@190: 
dev@190:   </div>
dev@190: </div>