Servicify menu, close menu on admin for small and medium screens

6 files changed, 84 insertions, 1 deletions

diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts
index 5943af4da..a1734ad80 100644
--- a/client/src/app/core/core.module.ts
+++ b/client/src/app/core/core.module.ts
@@ -13,6 +13,7 @@ import { throwIfAlreadyLoaded } from './module-import-guard'
 import { LoginGuard, RedirectService, UserRightGuard } from './routing'
 import { ServerService } from './server'
 import { ThemeService } from './theme'
+import { MenuService } from './menu'
 import { HotkeyModule } from 'angular2-hotkeys'
 import { CheatSheetComponent } from './hotkeys'
 import { ToastModule } from 'primeng/toast'
@@ -59,6 +60,7 @@ import { HooksService } from '@app/core/plugins/hooks.service'
     ConfirmService,
     ServerService,
     ThemeService,
+    MenuService,
     LoginGuard,
     UserRightGuard,
     UnloggedGuard,
diff --git a/client/src/app/core/menu/index.ts b/client/src/app/core/menu/index.ts
new file mode 100644
index 000000000..516a49aca
--- /dev/null
+++ b/client/src/app/core/menu/index.ts
@@ -0,0 +1 @@
+export * from './menu.service'
diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
new file mode 100644
index 000000000..46ef72e17
--- /dev/null
+++ b/client/src/app/core/menu/menu.service.ts
@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core'
+import { ScreenService } from '@app/shared/misc/screen.service'
+import { fromEvent } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+
+@Injectable()
+export class MenuService {
+  isMenuDisplayed = true
+  isMenuChangedByUser = false
+
+  constructor(
+    private screenService: ScreenService
+  ) {
+    // Do not display menu on small screens
+    if (this.screenService.isInSmallView()) {
+      this.isMenuDisplayed = false
+    }
+
+    fromEvent(window, 'resize')
+      .pipe(debounceTime(200))
+      .subscribe(() => this.onResize())
+  }
+
+  toggleMenu () {
+    this.isMenuDisplayed = !this.isMenuDisplayed
+    this.isMenuChangedByUser = true
+  }
+
+  onResize () {
+    this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
+  }
+}
diff --git a/client/src/app/core/routing/index.ts b/client/src/app/core/routing/index.ts
index 9f0b4eac5..58b83bb2a 100644
--- a/client/src/app/core/routing/index.ts
+++ b/client/src/app/core/routing/index.ts
@@ -2,3 +2,4 @@ export * from './login-guard.service'
 export * from './user-right-guard.service'
 export * from './preload-selected-modules-list'
 export * from './redirect.service'
+export * from './menu-guard.service'
diff --git a/client/src/app/core/routing/menu-guard.service.ts b/client/src/app/core/routing/menu-guard.service.ts
new file mode 100644
index 000000000..907d145fd
--- /dev/null
+++ b/client/src/app/core/routing/menu-guard.service.ts
@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core'
+import { CanActivate, CanDeactivate } from '@angular/router'
+import { MenuService } from '@app/core/menu'
+import { ScreenService } from '@app/shared/misc/screen.service'
+
+abstract class MenuGuard implements CanActivate, CanDeactivate<any> {
+  display = true
+  canDeactivate = this.canActivate
+
+  constructor (protected menu: MenuService, protected screen: ScreenService, display: boolean) {
+    this.display = display
+  }
+
+  canActivate (): boolean {
+    // small screens already have the site-wide onResize from screenService
+    // > medium screens have enough space to fit the administrative menus
+    if (!this.screen.isInMobileView() && this.screen.isInMediumView()) {
+      this.menu.isMenuDisplayed = this.display
+    }
+    return true
+  }
+}
+
+@Injectable()
+export class OpenMenuGuard extends MenuGuard {
+  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, true) }
+}
+
+@Injectable()
+export class CloseMenuGuard extends MenuGuard {
+  constructor (menu: MenuService, screen: ScreenService) { super(menu, screen, false) }
+}
+
+@Injectable()
+export class MenuGuards {
+  public static guards = [
+    OpenMenuGuard,
+    CloseMenuGuard
+  ]
+
+  static open () {
+    return OpenMenuGuard
+  }
+
+  static close () {
+    return CloseMenuGuard
+  }
+}
diff --git a/client/src/app/core/theme/theme.service.ts b/client/src/app/core/theme/theme.service.ts
index 3c066ca74..c0189ad32 100644
--- a/client/src/app/core/theme/theme.service.ts
+++ b/client/src/app/core/theme/theme.service.ts
@@ -8,7 +8,6 @@ import { first } from 'rxjs/operators'
 import { User } from '@app/shared/users/user.model'
 import { UserService } from '@app/shared/users/user.service'
 import { LocalStorageService } from '@app/shared/misc/storage.service'
-import { peertubeLocalStorage } from '@app/shared/misc/peertube-web-storage'
 
 @Injectable()
 export class ThemeService {