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>
<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>

40
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 {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';
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 {
dropdownContentStyle.display = 'block';
this.closeMobileDropdown();
console.log("Zu gemacht!")
}
}
}
}
}