From 71888a54e5fae3e234801a2bb9779add4ae810a3 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 23 Aug 2022 11:48:14 +0300
Subject: [PATCH] Add outside click handler for profile menu

---
 src/app/layout/app.layout.component.ts   | 17 ++++++++++++++++-
 src/app/layout/app.topbar.component.html |  2 +-
 src/app/layout/app.topbar.component.ts   |  4 +++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/app/layout/app.layout.component.ts b/src/app/layout/app.layout.component.ts
index d8fbcfa..2b313bf 100644
--- a/src/app/layout/app.layout.component.ts
+++ b/src/app/layout/app.layout.component.ts
@@ -16,8 +16,12 @@ export class AppLayoutComponent implements OnDestroy {
 
     menuOutsideClickListener: any;
 
+    profileMenuOutsideClickListener: any;
+
     @ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
 
+    @ViewChild(AppTopBarComponent) appTopbar!: AppTopBarComponent;
+
     constructor(private menuService: MenuService, public layoutService: LayoutService, public renderer: Renderer2, public router: Router) {
         this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
             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'));
 
                     if (isOutsideClicked) {
-                        this.layoutService.state.profileSidebarVisible = false;
                         this.layoutService.state.overlayMenuActive = false;
                         this.layoutService.state.staticMenuMobileActive = 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))
diff --git a/src/app/layout/app.topbar.component.html b/src/app/layout/app.topbar.component.html
index 70e134c..4ab69bd 100644
--- a/src/app/layout/app.topbar.component.html
+++ b/src/app/layout/app.topbar.component.html
@@ -12,7 +12,7 @@
         <i class="pi pi-ellipsis-v"></i>
     </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">
             <i class="pi pi-calendar"></i>
             <span>Calendar</span>
diff --git a/src/app/layout/app.topbar.component.ts b/src/app/layout/app.topbar.component.ts
index 2be0bc1..c5750fe 100644
--- a/src/app/layout/app.topbar.component.ts
+++ b/src/app/layout/app.topbar.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { MenuItem } from 'primeng/api';
 import { LayoutService } from "./service/app.layout.service";
 
@@ -10,5 +10,7 @@ export class AppTopBarComponent {
 
     items!: MenuItem[];
 
+    @ViewChild('menu') menu!: ElementRef;
+
     constructor(public layoutService: LayoutService) { }
 }