WIP: Responsive header menu 2

This commit is contained in:
Patrick Müller 2022-09-08 16:10:05 +02:00
parent 0c10e46d1a
commit d0c485c0e9
Signed by: Paddy
GPG Key ID: 37ABC11275CAABCE
4 changed files with 6 additions and 7 deletions

View File

@ -12,6 +12,5 @@ export class AppComponent {
user?: Player; user?: Player;
ngOnInit() { ngOnInit() {
// Load player data
} }
} }

View File

@ -14,5 +14,5 @@
<p>{{getUserName()}}</p> <p>{{getUserName()}}</p>
<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()"> <img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
</span> </span>
<app-profile (showProfilePopoverChange)="closeProfile()" *ngIf="showProfilePopover" [user]="this.user"></app-profile> <app-profile (showProfilePopOverChange)="closeProfile()" *ngIf="showProfilePopOver" [user]="this.user"></app-profile>
</div> </div>

View File

@ -9,7 +9,7 @@ import {StorageService} from '../../services/storage.service';
}) })
export class HeaderComponent implements OnInit { export class HeaderComponent implements OnInit {
showProfilePopover: boolean = false; showProfilePopOver: boolean = false;
user?: User; user?: User;
constructor() { constructor() {
@ -20,11 +20,11 @@ export class HeaderComponent implements OnInit {
} }
openProfile(): void { openProfile(): void {
this.showProfilePopover = true; this.showProfilePopOver = true;
} }
closeProfile(): void { closeProfile(): void {
this.showProfilePopover = false; this.showProfilePopOver = false;
} }
getUserName(): string { getUserName(): string {

View File

@ -10,7 +10,7 @@ export class ProfileComponent implements OnInit {
initialClick = true; initialClick = true;
@Input() user?: User; @Input() user?: User;
@Output() showProfilePopoverChange = new EventEmitter<boolean>(); @Output() showProfilePopOverChange = new EventEmitter<boolean>();
constructor(private eRef: ElementRef) { constructor(private eRef: ElementRef) {
} }
@ -31,7 +31,7 @@ export class ProfileComponent implements OnInit {
} }
if (!this.eRef.nativeElement.contains(event.target)) { if (!this.eRef.nativeElement.contains(event.target)) {
this.showProfilePopoverChange.emit(false); this.showProfilePopOverChange.emit(false);
} }
} }