Add Match History component and update header menu.

src/app/app-routing.module.ts

@@ -3,11 +3,13 @@ import {RouterModule, Routes} from '@angular/router';
 import {GamenightComponent} from './pages/gamenight/gamenight.component';
 import {HomeComponent} from './pages/home/home.component';
 import {StatsComponent} from './pages/stats/stats.component';
+import {MatchHistoryComponent} from "./pages/match-history/match-history.component";
 
 const routes: Routes = [
 	{path: '', component: HomeComponent, pathMatch: 'full'},
 	{path: 'gamenight', component: GamenightComponent},
-	{path: 'stats', component: StatsComponent}
+	{path: 'stats', component: StatsComponent},
+	{path: 'match-history', component: MatchHistoryComponent}
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -8,6 +8,7 @@ import {StatsComponent} from './pages/stats/stats.component';
 import {GamenightComponent} from './pages/gamenight/gamenight.component';
 import {HeaderComponent} from './components/header/header.component';
 import {ProfileComponent} from './components/profile/profile.component';
+import { MatchHistoryComponent } from './pages/match-history/match-history.component';
 
 @NgModule({
 	declarations: [
@@ -16,7 +17,8 @@ import {ProfileComponent} from './components/profile/profile.component';
 		StatsComponent,
 		GamenightComponent,
 		HeaderComponent,
-		ProfileComponent
+		ProfileComponent,
+  MatchHistoryComponent
 	],
 	imports: [
 		BrowserModule,

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

@@ -4,6 +4,7 @@
 		<div id="menu-desktop">
 			<div (click)="navigate('/')">Home</div>
 			<div (click)="navigate('/gamenight')">Game night</div>
+			<div (click)="navigate('match-history')">Match History</div>
 			<div (click)="navigate('/stats')">Stats</div>
 		</div>
 		<div id="menu-mobile">
@@ -11,6 +12,7 @@
 			<div id="menu-mobile-dropdown-content">
 				<div (click)="navigate('/')">Home</div>
 				<div (click)="navigate('/gamenight')">Game night</div>
+				<div (click)="navigate('match-history')">Match History</div>
 				<div (click)="navigate('/stats')">Stats</div>
 			</div>
 

src/app/pages/match-history/match-history.component.html

@@ -0,0 +1,4 @@
+<app-header></app-header>
+<div id="match-history">
+	<p>match-history works!</p>
+</div>

src/app/pages/match-history/match-history.component.scss

@@ -0,0 +1,5 @@
+@import '../../../styles';
+
+#match-history {
+	padding-top: $header_height;
+}

src/app/pages/match-history/match-history.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatchHistoryComponent } from './match-history.component';
+
+describe('MatchHistoryComponent', () => {
+  let component: MatchHistoryComponent;
+  let fixture: ComponentFixture<MatchHistoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatchHistoryComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MatchHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/match-history/match-history.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-match-history',
+  templateUrl: './match-history.component.html',
+  styleUrls: ['./match-history.component.scss']
+})
+export class MatchHistoryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}