WIP: Responsive header menu

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()">

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;
+}

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[];
 }

src/app/models/doppelkopf/gamerules.ts

@@ -0,0 +1,4 @@
+export interface GameRules {
+	mandatoryAnnouncement: boolean;
+
+}