1 import { Component, Input, OnDestroy, OnInit } from '@angular/core'
2 import { filter, take } from 'rxjs/operators'
3 import { NavigationStart, Router } from '@angular/router'
4 import { Subscription } from 'rxjs'
5 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
6 import { drop } from 'lodash-es'
8 export type TopMenuDropdownParam = {
19 selector: 'my-top-menu-dropdown',
20 templateUrl: './top-menu-dropdown.component.html',
21 styleUrls: [ './top-menu-dropdown.component.scss' ]
23 export class TopMenuDropdownComponent implements OnInit, OnDestroy {
24 @Input() menuEntries: TopMenuDropdownParam[] = []
26 suffixLabels: { [ parentLabel: string ]: string }
28 private openedOnHover = false
29 private routeSub: Subscription
31 constructor (private router: Router) {}
34 this.updateChildLabels(window.location.pathname)
36 this.routeSub = this.router.events
37 .pipe(filter(event => event instanceof NavigationStart))
38 .subscribe(() => this.updateChildLabels(window.location.pathname))
42 if (this.routeSub) this.routeSub.unsubscribe()
45 openDropdownOnHover (dropdown: NgbDropdown) {
46 this.openedOnHover = true
52 .subscribe(e => this.openedOnHover = false)
55 closeDropdownIfHovered (dropdown: NgbDropdown) {
56 if (this.openedOnHover === false) return
59 this.openedOnHover = false
62 private updateChildLabels (path: string) {
63 this.suffixLabels = {}
65 for (const entry of this.menuEntries) {
66 if (!entry.children) continue
68 for (const child of entry.children) {
69 if (path.startsWith(child.routerLink)) {
70 this.suffixLabels[entry.label] = child.label