add resize listener (#1182)

* add resize listener

* respect user decision

* change listener to rxjs

* review changes

1 files changed, 12 insertions, 1 deletions

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index 7cd0fff1b..dc4d0bf6a 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -4,9 +4,10 @@ import { GuardsCheckStart, NavigationEnd, Router } from '@angular/router'
 import { AuthService, RedirectService, ServerService, ThemeService } from '@app/core'
 import { is18nPath } from '../../../shared/models/i18n'
 import { ScreenService } from '@app/shared/misc/screen.service'
-import { skip } from 'rxjs/operators'
+import { skip, debounceTime } from 'rxjs/operators'
 import { HotkeysService, Hotkey } from 'angular2-hotkeys'
 import { I18n } from '@ngx-translate/i18n-polyfill'
+import { fromEvent } from 'rxjs'
 
 @Component({
   selector: 'my-app',
@@ -28,6 +29,7 @@ export class AppComponent implements OnInit {
   }
 
   isMenuDisplayed = true
+  isMenuChangedByUser = false
 
   customCSS: SafeHtml
 
@@ -165,6 +167,10 @@ export class AppComponent implements OnInit {
         return false
       }, undefined, this.i18n('Toggle Dark theme'))
     ])
+
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(200))
+      .subscribe(() => this.onResize())
   }
 
   isUserLoggedIn () {
@@ -173,5 +179,10 @@ export class AppComponent implements OnInit {
 
   toggleMenu () {
     this.isMenuDisplayed = !this.isMenuDisplayed
+    this.isMenuChangedByUser = true
+  }
+
+  onResize () {
+    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
   }
 }