Add links in desktop menu and dropdown menu in mobile (wip)

src/app/components/header/header.component.html

@@ -2,17 +2,24 @@
 	<p id="header-title">Doppelkopf-Stats</p>
 	<span id="menu">
 		<div id="menu-desktop">
-			<div>Home</div>
-			<div>Game night</div>
-			<div>Stats</div>
+			<div (click)="navigate('/')">Home</div>
+			<div (click)="navigate('/gamenight')">Game night</div>
+			<div (click)="navigate('/stats')">Stats</div>
 		</div>
 		<div id="menu-mobile">
-			<div>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>
+				<div (click)="navigate('/stats')">Stats</div>
+			</div>
+
 		</div>
 	</span>
 	<span id="user-info">
 		<p>{{getUserName()}}</p>
 		<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
 	</span>
-	<app-profile (showProfilePopOverChange)="closeProfile()" *ngIf="showProfilePopOver" [user]="this.user"></app-profile>
+	<app-profile (showProfilePopOverChange)="closeProfile()" *ngIf="showProfilePopOver"
+				 [user]="this.user"></app-profile>
 </div>

src/app/components/header/header.component.scss

@@ -64,3 +64,23 @@
 	padding-left: 2em;
 	padding-right: 2em;
 }
+
+#menu-desktop div:hover {
+	cursor: pointer;
+	color: $text;
+}
+
+/* Dropdown Menu Mobile */
+
+#menu-mobile-dropdown-content {
+	display: none;
+	z-index: 1;
+	position: absolute;
+	min-width: 160px;
+
+}
+
+#menu-mobile-dropdown-content div {
+	padding: 12px 16px;
+
+}

src/app/components/header/header.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import {User} from '../../models/user';
 import {StorageService} from '../../services/storage.service';
+import {Router} from "@angular/router";
 
 @Component({
 	selector: 'app-header',
@@ -12,7 +13,7 @@ export class HeaderComponent implements OnInit {
 	showProfilePopOver: boolean = false;
 	user?: User;
 
-	constructor() {
+	constructor(private router:Router) {
 		this.user = StorageService.getUserInfo();
 	}
 
@@ -30,4 +31,17 @@ export class HeaderComponent implements OnInit {
 	getUserName(): string {
 		return this.user ? this.user.firstName : 'Logged out';
 	}
+
+	navigate(path:String) : void {
+		this.router.navigate([path]);
+	}
+
+	openMobileDropdown() : void {
+		const dropdownContentStyle = document.getElementById("menu-mobile-dropdown-content")!.style;
+		if(dropdownContentStyle.display == "block")
+			dropdownContentStyle.display = "none";
+		else {
+			dropdownContentStyle.display = "block";
+		}
+	}
 }