diff --git a/Display/src/app/components/nav/nav.component.html b/Display/src/app/components/nav/nav.component.html
index 9747ed7..71c66e1 100644
--- a/Display/src/app/components/nav/nav.component.html
+++ b/Display/src/app/components/nav/nav.component.html
@@ -1,11 +1,11 @@
 <mat-toolbar color="primary">
-    <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
+    <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="sidenav.toggle()" *ngIf="isHandset$ | async">
         <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
     </button>
     <span>Home Monitor</span>
 </mat-toolbar>
 <mat-sidenav-container class="sidenav-container">
-    <mat-sidenav #drawer (click)="drawer.toggle()" class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
+    <mat-sidenav #sidenav (click)="toggleSidenav()" class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
         <mat-nav-list>
             <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
                 <mat-icon matListIcon class="nav-icon">
diff --git a/Display/src/app/components/nav/nav.component.ts b/Display/src/app/components/nav/nav.component.ts
index 53d9f82..5a90836 100644
--- a/Display/src/app/components/nav/nav.component.ts
+++ b/Display/src/app/components/nav/nav.component.ts
@@ -1,7 +1,8 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { Observable } from 'rxjs';
 import { map, shareReplay } from 'rxjs/operators';
+import { MatSidenav } from '@angular/material';
 
 @Component({
     selector: 'app-nav',
@@ -9,6 +10,8 @@ import { map, shareReplay } from 'rxjs/operators';
     styleUrls: ['./nav.component.scss']
 })
 export class NavComponent {
+    @ViewChild('sidenav', null) sidenav: MatSidenav;
+
     isHandset$: Observable<boolean> = this.breakpointObserver.observe([
         Breakpoints.HandsetLandscape,
         Breakpoints.HandsetPortrait,
@@ -23,4 +26,12 @@ export class NavComponent {
         );
 
     constructor(private breakpointObserver: BreakpointObserver) { }
+
+    public toggleSidenav() {
+        this.isHandset$.subscribe(isHandset => {
+            if (isHandset) {
+                this.sidenav.toggle();
+            }
+        });
+    }
 }