diff --git a/Display/src/app/components/nav/nav.component.html b/Display/src/app/components/nav/nav.component.html
index 7dd0626..9747ed7 100644
--- a/Display/src/app/components/nav/nav.component.html
+++ b/Display/src/app/components/nav/nav.component.html
@@ -5,7 +5,7 @@
     <span>Home Monitor</span>
 </mat-toolbar>
 <mat-sidenav-container class="sidenav-container">
-    <mat-sidenav #drawer class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
+    <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-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 adecd5d..53d9f82 100644
--- a/Display/src/app/components/nav/nav.component.ts
+++ b/Display/src/app/components/nav/nav.component.ts
@@ -9,7 +9,14 @@ import { map, shareReplay } from 'rxjs/operators';
     styleUrls: ['./nav.component.scss']
 })
 export class NavComponent {
-    isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
+    isHandset$: Observable<boolean> = this.breakpointObserver.observe([
+        Breakpoints.HandsetLandscape,
+        Breakpoints.HandsetPortrait,
+        Breakpoints.Handset,
+        Breakpoints.TabletLandscape,
+        Breakpoints.TabletPortrait,
+        Breakpoints.Tablet
+    ])
         .pipe(
             map(result => result.matches),
             shareReplay()