import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { filter, take } from 'rxjs/operators'
-import { NavigationStart, Router } from '@angular/router'
+import { NavigationEnd, Router } from '@angular/router'
import { Subscription } from 'rxjs'
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
-import { drop } from 'lodash-es'
+import { GlobalIconName } from '@app/shared/images/global-icon.component'
+import { ScreenService } from '@app/shared/misc/screen.service'
export type TopMenuDropdownParam = {
label: string
children?: {
label: string
routerLink: string
+
+ iconName?: GlobalIconName
}[]
}
@Input() menuEntries: TopMenuDropdownParam[] = []
suffixLabels: { [ parentLabel: string ]: string }
+ hasIcons = false
+ container: undefined | 'body' = undefined
private openedOnHover = false
private routeSub: Subscription
- constructor (private router: Router) {}
+ constructor (
+ private router: Router,
+ private screen: ScreenService
+ ) {}
ngOnInit () {
this.updateChildLabels(window.location.pathname)
this.routeSub = this.router.events
- .pipe(filter(event => event instanceof NavigationStart))
+ .pipe(filter(event => event instanceof NavigationEnd))
.subscribe(() => this.updateChildLabels(window.location.pathname))
+
+ this.hasIcons = this.menuEntries.some(
+ e => e.children && e.children.some(c => !!c.iconName)
+ )
+
+ // FIXME: We have to set body for the container to avoid because of scroll overflow on mobile view
+ // But this break our hovering system
+ if (this.screen.isInMobileView()) {
+ this.container = 'body'
+ }
}
ngOnDestroy () {
// Menu was closed
dropdown.openChange
.pipe(take(1))
- .subscribe(e => this.openedOnHover = false)
+ .subscribe(() => this.openedOnHover = false)
+ }
+
+ dropdownAnchorClicked (dropdown: NgbDropdown) {
+ if (this.openedOnHover) {
+ this.openedOnHover = false
+ return
+ }
+
+ return dropdown.toggle()
}
closeDropdownIfHovered (dropdown: NgbDropdown) {