f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add outside click handler for profile menu

Browse Source
This commit is contained in:
Cagatay Civici 2022-08-23 11:48:14 +03:00
parent 17b26f162c
commit 71888a54e5
3 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/layout/app.layout.component.ts
View File

@ -16,8 +16,12 @@ export class AppLayoutComponent implements OnDestroy {
menuOutsideClickListener: any; menuOutsideClickListener: any;
profileMenuOutsideClickListener: any;
@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent; @ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
@ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
constructor(private menuService: MenuService, public layoutService: LayoutService, public renderer: Renderer2, public router: Router) { constructor(private menuService: MenuService, public layoutService: LayoutService, public renderer: Renderer2, public router: Router) {
this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => { this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
if (!this.menuOutsideClickListener) { if (!this.menuOutsideClickListener) {
@ -26,7 +30,6 @@ export class AppLayoutComponent implements OnDestroy {
|| event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger')); || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger'));
if (isOutsideClicked) { if (isOutsideClicked) {
this.layoutService.state.profileSidebarVisible = false;
this.layoutService.state.overlayMenuActive = false; this.layoutService.state.overlayMenuActive = false;
this.layoutService.state.staticMenuMobileActive = false; this.layoutService.state.staticMenuMobileActive = false;
this.layoutService.state.menuHoverActive = false; this.layoutService.state.menuHoverActive = false;
@ -42,6 +45,18 @@ export class AppLayoutComponent implements OnDestroy {
} }
}); });
} }
if (!this.profileMenuOutsideClickListener) {
this.profileMenuOutsideClickListener = this.renderer.listen('document', 'click', event => {
const shouldCloseProfileMenu = !(this.appTopbar.menu.nativeElement.isSameNode(event.target) || event.target.classList.contains('p-trigger') || event.target.parentNode.classList.contains('p-trigger'));
if (shouldCloseProfileMenu) {
this.layoutService.state.profileSidebarVisible = false;
this.profileMenuOutsideClickListener();
this.profileMenuOutsideClickListener = null;
}
});
}
}); });
this.router.events.pipe(filter(event => event instanceof NavigationEnd)) this.router.events.pipe(filter(event => event instanceof NavigationEnd))

2
src/app/layout/app.topbar.component.html
View File

@ -12,7 +12,7 @@
<i class="pi pi-ellipsis-v"></i> <i class="pi pi-ellipsis-v"></i>
</button> </button>
<div class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active': layoutService.state.profileSidebarVisible}"> <div #menu class="layout-topbar-menu" [ngClass]="{'layout-topbar-menu-mobile-active': layoutService.state.profileSidebarVisible}">
<button class="p-link layout-topbar-button"> <button class="p-link layout-topbar-button">
<i class="pi pi-calendar"></i> <i class="pi pi-calendar"></i>
<span>Calendar</span> <span>Calendar</span>

4
src/app/layout/app.topbar.component.ts
View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ElementRef, ViewChild } from '@angular/core';
import { MenuItem } from 'primeng/api'; import { MenuItem } from 'primeng/api';
import { LayoutService } from "./service/app.layout.service"; import { LayoutService } from "./service/app.layout.service";
@ -10,5 +10,7 @@ export class AppTopBarComponent {
items!: MenuItem[]; items!: MenuItem[];
@ViewChild('menu') menu!: ElementRef;
constructor(public layoutService: LayoutService) { } constructor(public layoutService: LayoutService) { }
} }