[ACA-2208] Hide app menu on swipe (#934)

* mobile: hide app menu on swipe left

* check for mobile screen size

* space for click out on small devices

* added test

* fix test

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>
 

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();
+  });
 });

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;

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;