Compare commits

..

No commits in common. "d0df6e3e5c8e04afdae65119558b7e91733462d2" and "68e35fc5bcb9141b05a432f2f4e3af196151f579" have entirely different histories.

2 changed files with 8 additions and 36 deletions

View File

@ -8,7 +8,7 @@
<div (click)="navigate('/stats')">Stats</div>
</div>
<div id="menu-mobile">
<div id="menu-mobile-dropdown-button" (click)="openMobileDropdown()">Open</div>
<div id="menu-mobile-dropdown-button" (click)="toggleMobileDropdown()">Open</div>
<div id="menu-mobile-dropdown-content">
<div (click)="navigate('/')">Home</div>
<div (click)="navigate('/gamenight')">Game night</div>

View File

@ -1,4 +1,4 @@
import {Component, HostListener, OnInit} from '@angular/core';
import {Component, OnInit} from '@angular/core';
import {User} from '../../models/user';
import {StorageService} from '../../services/storage.service';
import {Router} from '@angular/router';
@ -12,15 +12,12 @@ 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 {
@ -32,45 +29,20 @@ 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]);
}
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;
toggleMobileDropdown(): void {
const dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
if (dropdownContentStyle.display == 'block') {
dropdownContentStyle.display = 'none';
} else {
this.closeMobileDropdown();
console.log("Zu gemacht!")
}
}
dropdownContentStyle.display = 'block';
}
}
}