PlutoDev/Doppelkopf-Stats-Frontend
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add close on outsideclick functionality to the mobile menu on header component.

Browse Source
This commit is contained in:
Julian Brunner 2022-09-10 22:13:40 +02:00
parent 14696fc116
commit 5c675782aa
2 changed files with 36 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/header/header.component.html
View File

@ -8,7 +8,7 @@
<div (click)="navigate('/stats')">Stats</div> <div (click)="navigate('/stats')">Stats</div>
</div> </div>
<div id="menu-mobile"> <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 id="menu-mobile-dropdown-content">
<div (click)="navigate('/')">Home</div> <div (click)="navigate('/')">Home</div>
<div (click)="navigate('/gamenight')">Game night</div> <div (click)="navigate('/gamenight')">Game night</div>

42
src/app/components/header/header.component.ts
View File

@ -1,4 +1,4 @@
import {Component, OnInit} from '@angular/core'; import {Component, HostListener, OnInit} from '@angular/core';
import {User} from '../../models/user'; import {User} from '../../models/user';
import {StorageService} from '../../services/storage.service'; import {StorageService} from '../../services/storage.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
@ -12,12 +12,15 @@ export class HeaderComponent implements OnInit {
showProfilePopOver: boolean = false; showProfilePopOver: boolean = false;
user?: User; user?: User;
initialClickMobileMenu : boolean = true
dropdownContentStyle! : CSSStyleDeclaration;
constructor(private router: Router) { constructor(private router: Router) {
this.user = StorageService.getUserInfo(); this.user = StorageService.getUserInfo();
} }
ngOnInit(): void { ngOnInit(): void {
this.dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
} }
openProfile(): void { openProfile(): void {
@ -29,20 +32,45 @@ export class HeaderComponent implements OnInit {
} }
getUserName(): string { getUserName(): string {
return this.user ? this.user.firstName : 'Logged out'; return this.user ? this.user.firstName : 'Logged out';
} }
navigate(path: string): void { navigate(path: string): void {
this.initialClickMobileMenu = true;
this.router.navigate([path]); this.router.navigate([path]);
} }
toggleMobileDropdown(): void { openMobileDropdown() : void {
const dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style; if (!this.isMobileDropdownOpen()) {
if (dropdownContentStyle.display == 'block') { this.dropdownContentStyle.display = 'block';
dropdownContentStyle.display = 'none'; this.initialClickMobileMenu = true;
} else { }
dropdownContentStyle.display = 'block'; }
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!")
}
}
} }
} }
} }