From 0c10e46d1a102a67049be797fc56c6eb15fb491d Mon Sep 17 00:00:00 2001
From: Patrick Mueller <patrick@mueller-patrick.tech>
Date: Thu, 8 Sep 2022 15:01:02 +0200
Subject: [PATCH] WIP: Responsive header menu

---
 .../components/header/header.component.html   | 10 +++++++
 .../components/header/header.component.scss   | 30 +++++++++++++++++++
 src/app/models/doppelkopf/gameNight.ts        |  2 ++
 src/app/models/doppelkopf/gamerules.ts        |  4 +++
 4 files changed, 46 insertions(+)
 create mode 100644 src/app/models/doppelkopf/gamerules.ts

diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
index c6d2da7..77edbc6 100644
--- a/src/app/components/header/header.component.html
+++ b/src/app/components/header/header.component.html
@@ -1,5 +1,15 @@
 <div id="header">
 	<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>
+		<div id="menu-mobile">
+			<div>Open</div>
+		</div>
+	</span>
 	<span id="user-info">
 		<p>{{getUserName()}}</p>
 		<img src="assets/images/user.png" alt="User Icon" (click)="openProfile()">
diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss
index 1b36afa..30f506f 100644
--- a/src/app/components/header/header.component.scss
+++ b/src/app/components/header/header.component.scss
@@ -34,3 +34,33 @@
 #user-info img:hover {
 	cursor: pointer;
 }
+
+@media (min-width: 768px) {
+	#menu-mobile {
+		display: none;
+	}
+	#menu-desktop {
+		display: inherit;
+	}
+}
+@media(max-width: 767px) {
+	#menu-desktop {
+		display: none;
+	}
+	#menu-mobile {
+		display: inherit;
+	}
+}
+
+#menu {
+	display: flex;
+	justify-content: center;
+	max-width: 100%;
+	height: 100%;
+	align-items: center;
+}
+
+#menu div div {
+	padding-left: 2em;
+	padding-right: 2em;
+}
diff --git a/src/app/models/doppelkopf/gameNight.ts b/src/app/models/doppelkopf/gameNight.ts
index 463fd21..1df0b43 100644
--- a/src/app/models/doppelkopf/gameNight.ts
+++ b/src/app/models/doppelkopf/gameNight.ts
@@ -1,10 +1,12 @@
 import {Game} from './game';
 import {Player} from './player';
+import {GameRules} from './gamerules';
 
 export interface GameNight {
 	gameNightId: number;
 	date: Date;
 	players: Player[];  // We need players here and in the game because maybe we have 5 players for a game night and
 						// they switch every game
+	rules: GameRules;
 	games: Game[];
 }
diff --git a/src/app/models/doppelkopf/gamerules.ts b/src/app/models/doppelkopf/gamerules.ts
new file mode 100644
index 0000000..a336d8a
--- /dev/null
+++ b/src/app/models/doppelkopf/gamerules.ts
@@ -0,0 +1,4 @@
+export interface GameRules {
+	mandatoryAnnouncement: boolean;
+
+}