WIP: Responsive header menu 2

src/app/app.component.ts

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

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

@@ -1,8 +1,18 @@
 <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()">
 	</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

@@ -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/components/header/header.component.ts

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

src/app/components/profile/profile.component.ts

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

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