remove memory leak for mobile screens (#744)

src/app/components/layout/layout.component.ts

@@ -56,6 +56,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
   layout: SidenavLayoutComponent;
 
   onDestroy$: Subject<boolean> = new Subject<boolean>();
+  isSmallScreen$: Observable<boolean>;
+
   expandedSidenav: boolean;
   currentFolderId: string;
   canUpload = false;
@@ -76,6 +78,10 @@ export class LayoutComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
+    this.isSmallScreen$ = this.breakpointObserver
+      .observe(['(max-width: 600px)'])
+      .pipe(map(result => result.matches));
+
     this.hideSidenav = this.hideConditions.some(el =>
       this.router.routerState.snapshot.url.includes(el)
     );
@@ -96,11 +102,12 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
     this.router.events
       .pipe(
-        withLatestFrom(this.isSmallScreen()),
+        withLatestFrom(this.isSmallScreen$),
         filter(
           ([event, isSmallScreen]) =>
             isSmallScreen && event instanceof NavigationEnd
-        )
+        ),
+        takeUntil(this.onDestroy$)
       )
       .subscribe(() => {
         this.layout.container.toggleMenu();
@@ -170,10 +177,4 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
     return expand;
   }
-
-  private isSmallScreen(): Observable<boolean> {
-    return this.breakpointObserver
-      .observe(['(max-width: 600px)'])
-      .pipe(map(result => result.matches));
-  }
 }