diff --git a/src/app/components/layout/app-layout/app-layout.component.html b/src/app/components/layout/app-layout/app-layout.component.html
index 477139289..e0e9a4733 100644
--- a/src/app/components/layout/app-layout/app-layout.component.html
+++ b/src/app/components/layout/app-layout/app-layout.component.html
@@ -20,7 +20,10 @@
 
     <adf-sidenav-layout-navigation>
       <ng-template let-isMenuMinimized="isMenuMinimized">
-        <app-sidenav [showLabel]="!isMenuMinimized()"></app-sidenav>
+        <app-sidenav
+          [showLabel]="!isMenuMinimized()"
+          (swipeleft)="hideMenu($event)"
+        ></app-sidenav>
       </ng-template>
     </adf-sidenav-layout-navigation>
 
diff --git a/src/app/components/layout/app-layout/app-layout.component.spec.ts b/src/app/components/layout/app-layout/app-layout.component.spec.ts
index 842b32eac..14fd42e7e 100644
--- a/src/app/components/layout/app-layout/app-layout.component.spec.ts
+++ b/src/app/components/layout/app-layout/app-layout.component.spec.ts
@@ -163,4 +163,19 @@ describe('AppLayoutComponent', () => {
       done();
     });
   });
+
+  it('should close menu on mobile screen size', () => {
+    component.minimizeSidenav = false;
+    component.layout.container = {
+      isMobileScreenSize: true,
+      toggleMenu: () => {}
+    };
+
+    spyOn(component.layout.container, 'toggleMenu');
+    fixture.detectChanges();
+
+    component.hideMenu(<any>{ preventDefault: () => {} });
+
+    expect(component.layout.container.toggleMenu).toHaveBeenCalled();
+  });
 });
diff --git a/src/app/components/layout/app-layout/app-layout.component.ts b/src/app/components/layout/app-layout/app-layout.component.ts
index 81869ad7d..8538e4114 100644
--- a/src/app/components/layout/app-layout/app-layout.component.ts
+++ b/src/app/components/layout/app-layout/app-layout.component.ts
@@ -152,6 +152,13 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
     this.onDestroy$.complete();
   }
 
+  hideMenu(event: Event) {
+    if (!this.minimizeSidenav && this.layout.container.isMobileScreenSize) {
+      event.preventDefault();
+      this.layout.container.toggleMenu();
+    }
+  }
+
   private updateState() {
     if (this.minimizeSidenav && !this.layout.isMenuMinimized) {
       this.layout.isMenuMinimized = true;
diff --git a/src/app/ui/overrides/adf-sidenav-layout.theme.scss b/src/app/ui/overrides/adf-sidenav-layout.theme.scss
index 749064662..1d42a8d68 100644
--- a/src/app/ui/overrides/adf-sidenav-layout.theme.scss
+++ b/src/app/ui/overrides/adf-sidenav-layout.theme.scss
@@ -4,6 +4,14 @@
   adf-sidenav-layout {
     @include flex-column;
 
+    // TODO: move to ADF
+    @media screen and ($mat-xsmall) {
+      .mat-drawer {
+        width: calc(-50px + 100vw) !important;
+        max-width: 320px !important;
+      }
+    }
+
     .mat-drawer-content {
       @include flex-column;
       overflow: auto;