From 9012c0832b7d589da1f71016e121e80a3b5c2ce3 Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Thu, 18 Oct 2018 09:37:37 +0300
Subject: [PATCH] [ACA-1892] close sidenav when navigate on mobile (#730)

---
 src/app/components/layout/layout.component.ts | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts
index f6f79ec89..e856908b5 100644
--- a/src/app/components/layout/layout.component.ts
+++ b/src/app/components/layout/layout.component.ts
@@ -37,11 +37,12 @@ import {
 } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { Subject } from 'rxjs';
-import { filter, takeUntil } from 'rxjs/operators';
+import { Subject, Observable } from 'rxjs';
+import { filter, takeUntil, map, withLatestFrom } from 'rxjs/operators';
 import { NodePermissionService } from '../../services/node-permission.service';
 import { currentFolder } from '../../store/selectors/app.selectors';
 import { AppStore } from '../../store/states';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 @Component({
   selector: 'app-layout',
@@ -70,7 +71,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
     private permission: NodePermissionService,
     private router: Router,
     private userPreferenceService: UserPreferencesService,
-    private appConfigService: AppConfigService
+    private appConfigService: AppConfigService,
+    private breakpointObserver: BreakpointObserver
   ) {}
 
   ngOnInit() {
@@ -92,12 +94,24 @@ export class LayoutComponent implements OnInit, OnDestroy {
         this.canUpload = node && this.permission.check(node, ['create']);
       });
 
+    this.router.events
+      .pipe(
+        withLatestFrom(this.isSmallScreen()),
+        filter(
+          ([event, isSmallScreen]) =>
+            isSmallScreen && event instanceof NavigationEnd
+        )
+      )
+      .subscribe(() => {
+        this.layout.container.toggleMenu();
+      });
+
     this.router.events
       .pipe(
         filter(event => event instanceof NavigationEnd),
         takeUntil(this.onDestroy$)
       )
-      .subscribe((event: any) => {
+      .subscribe((event: NavigationEnd) => {
         this.minimizeSidenav = this.minimizeConditions.some(el =>
           event.urlAfterRedirects.includes(el)
         );
@@ -156,4 +170,10 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
     return expand;
   }
+
+  private isSmallScreen(): Observable<boolean> {
+    return this.breakpointObserver
+      .observe([Breakpoints.HandsetPortrait, Breakpoints.HandsetLandscape])
+      .pipe(map(result => result.matches));
+  }
 }