diff --git a/example-app/app/core/components/sidenav.component.ts b/example-app/app/core/components/sidenav.component.ts
index 762be85dae..8e6d4397a9 100644
--- a/example-app/app/core/components/sidenav.component.ts
+++ b/example-app/app/core/components/sidenav.component.ts
@@ -1,9 +1,9 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'bc-sidenav',
   template: `
-    <mat-sidenav [opened]="open">
+    <mat-sidenav #sidenav [opened]="open" (keydown.escape)="sidenav.close()" (closedStart)="closeMenu.emit()" disableClose>
       <mat-nav-list>
         <ng-content></ng-content>
       </mat-nav-list>
@@ -19,4 +19,5 @@ import { Component, Input } from '@angular/core';
 })
 export class SidenavComponent {
   @Input() open = false;
+  @Output() closeMenu = new EventEmitter();
 }
diff --git a/example-app/app/core/containers/app.component.ts b/example-app/app/core/containers/app.component.ts
index 0ba77b3fe6..30da7c73a5 100644
--- a/example-app/app/core/containers/app.component.ts
+++ b/example-app/app/core/containers/app.component.ts
@@ -12,7 +12,7 @@ import * as LayoutActions from '../actions/layout.actions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <bc-layout>
-      <bc-sidenav [open]="showSidenav$ | async">
+      <bc-sidenav [open]="showSidenav$ | async" (closeMenu)="closeSidenav()">
         <bc-nav-item (navigate)="closeSidenav()" *ngIf="loggedIn$ | async" routerLink="/" icon="book" hint="View your book collection">
           My Collection
         </bc-nav-item>