1 import { fromEvent } from 'rxjs'
2 import { debounceTime } from 'rxjs/operators'
3 import { Injectable } from '@angular/core'
4 import { ScreenService } from '../wrappers'
7 export class MenuService {
9 isMenuChangedByUser = false
10 menuWidth = 240 // should be kept equal to $menu-width
13 private screenService: ScreenService
15 // Do not display menu on small or touch screens
16 if (this.screenService.isInSmallView() || this.screenService.isInTouchScreen()) {
17 this.setMenuDisplay(false)
20 this.handleWindowResize()
24 this.setMenuDisplay(!this.isMenuDisplayed)
25 this.isMenuChangedByUser = true
29 return this.isMenuDisplayed
32 setMenuDisplay (display: boolean) {
33 this.isMenuDisplayed = display
35 if (!this.screenService.isInTouchScreen()) return
37 // On touch screens, lock body scroll and display content overlay when memu is opened
38 if (this.isMenuDisplayed) {
39 document.body.classList.add('menu-open')
40 this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
44 document.body.classList.remove('menu-open')
48 this.isMenuDisplayed = window.innerWidth >= 800 && !this.isMenuChangedByUser
51 private handleWindowResize () {
52 // On touch screens, do not handle window resize event since opened menu is handled with a content overlay
53 if (this.screenService.isInTouchScreen()) return
55 fromEvent(window, 'resize')
56 .pipe(debounceTime(200))
57 .subscribe(() => this.onResize())