<a *ngIf="menuEntry.routerLink" [routerLink]="menuEntry.routerLink" routerLinkActive="active" class="title-page title-page-settings">{{ menuEntry.label }}</a>
- <div *ngIf="!menuEntry.routerLink" ngbDropdown [container]="container" class="parent-entry"
+ <div *ngIf="!menuEntry.routerLink" ngbDropdown container="body" class="parent-entry"
#dropdown="ngbDropdown" (mouseleave)="closeDropdownIfHovered(dropdown)">
<span
*ngIf="isInSmallView"
import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { GlobalIconName } from '@app/shared/images/global-icon.component'
import { ScreenService } from '@app/shared/misc/screen.service'
+import { MenuService } from '@app/core/menu'
export type TopMenuDropdownParam = {
label: string
suffixLabels: { [ parentLabel: string ]: string }
hasIcons = false
- container: undefined | 'body' = undefined
isModalOpened = false
currentMenuEntryIndex: number
constructor (
private router: Router,
private modalService: NgbModal,
- private screen: ScreenService
+ private screen: ScreenService,
+ private menuService: MenuService
) { }
get isInSmallView () {
- return this.screen.isInSmallView()
+ let marginLeft = 0
+ if (this.menuService.isMenuDisplayed) {
+ marginLeft = this.menuService.menuWidth
+ }
+
+ return this.screen.isInSmallView(marginLeft)
}
ngOnInit () {
this.hasIcons = this.menuEntries.some(
e => e.children && e.children.some(c => !!c.iconName)
)
-
- // We have to set body for the container to avoid scroll overflow on mobile and small views
- if (this.isInSmallView) {
- this.container = 'body'
- }
}
ngOnDestroy () {
this.refreshWindowInnerWidth()
}
- isInSmallView () {
+ isInSmallView (marginLeft = 0) {
+ if (marginLeft > 0) {
+ const contentWidth = this.getWindowInnerWidth() - marginLeft
+ return contentWidth < 800
+ }
+
return this.getWindowInnerWidth() < 800
}