From 5c675782aad9cf4ded4a3be72ccb43cc5e2a284b Mon Sep 17 00:00:00 2001
From: Julian Brunner <brunner_julian@yahoo.com>
Date: Sat, 10 Sep 2022 22:13:40 +0200
Subject: [PATCH] Add close on outsideclick functionality to the mobile menu on
 header component.

---
 .../components/header/header.component.html   |  2 +-
 src/app/components/header/header.component.ts | 42 +++++++++++++++----
 2 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index e545b5e..b8eb750 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -8,7 +8,7 @@
 			<div (click)="navigate('/stats')">Stats</div>
 		</div>
 		<div id="menu-mobile">
-			<div id="menu-mobile-dropdown-button" (click)="toggleMobileDropdown()">Open</div>
+			<div id="menu-mobile-dropdown-button" (click)="openMobileDropdown()">Open</div>
 			<div id="menu-mobile-dropdown-content">
 				<div (click)="navigate('/')">Home</div>
 				<div (click)="navigate('/gamenight')">Game night</div>
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 25fa5e9..8b970eb 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, HostListener, OnInit} from '@angular/core';
 import {User} from '../../models/user';
 import {StorageService} from '../../services/storage.service';
 import {Router} from '@angular/router';
@@ -12,12 +12,15 @@ export class HeaderComponent implements OnInit {
 
 	showProfilePopOver: boolean = false;
 	user?: User;
+	initialClickMobileMenu : boolean = true
+	dropdownContentStyle! : CSSStyleDeclaration;
 
 	constructor(private router: Router) {
 		this.user = StorageService.getUserInfo();
 	}
 
 	ngOnInit(): void {
+		this.dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
 	}
 
 	openProfile(): void {
@@ -29,20 +32,45 @@ export class HeaderComponent implements OnInit {
 	}
 
 
+
+
 	getUserName(): string {
 		return this.user ? this.user.firstName : 'Logged out';
 	}
 
 	navigate(path: string): void {
+		this.initialClickMobileMenu = true;
 		this.router.navigate([path]);
 	}
 
-	toggleMobileDropdown(): void {
-		const dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
-		if (dropdownContentStyle.display == 'block') {
-			dropdownContentStyle.display = 'none';
-		} else {
-			dropdownContentStyle.display = 'block';
+	openMobileDropdown() : void {
+		if (!this.isMobileDropdownOpen()) {
+			this.dropdownContentStyle.display = 'block';
+			this.initialClickMobileMenu = true;
+		}
+	}
+
+	closeMobileDropdown() : void {
+		this.dropdownContentStyle.display = 'none';
+		this.initialClickMobileMenu = true;
+	}
+
+	isMobileDropdownOpen() : Boolean {
+		return this.dropdownContentStyle.display == 'block';
+	}
+
+	@HostListener('document:click', ['$event'])
+	@HostListener('document:touchstart', ['$event'])
+	handleOutsideClick(event: any) {
+		if (!document.getElementById("menu-mobile-dropdown-content")!.contains(event.target)) {
+			if(this.isMobileDropdownOpen()) {
+				if(this.initialClickMobileMenu) {
+					this.initialClickMobileMenu = false;
+				} else {
+					this.closeMobileDropdown();
+					console.log("Zu gemacht!")
+				}
+			}
 		}
 	}
 }