Moving whole header in its own component

It became too massive.

src/App.vue

@@ -1,33 +1,18 @@
 <template>
 	<div id="app">
-		<header>
-			<div class="logo">
-				<span>RedstoneServer</span>
-			</div>
+		<HeaderBar />
 
-			<MenuContainer class="menu-container">
-				<router-link class="top-link" :to="link" v-for="(link, text) in menu_entries" :key="link">{{ text }}</router-link>
-			</MenuContainer>
-
-			<div class="user">
-				<div v-if="user">
-					<span>Username: {{ user.username }} </span>
-					<span class="rl" @click="logout">Logout</span>
-				</div>
-				<router-link class="rl" to="/login" v-else>Login</router-link>
-			</div>
-		</header>
-
-		<p>Website under development, please excuse ugly style and broken/missing features as well as missing legal things.</p>
 		<div class="content">
+			<p>Website under development, please excuse ugly style and broken/missing features as well as missing legal things.</p>
 			<router-view/>
+			<br>
+			<router-link to="/impressum">Impressum</router-link>
 		</div>
-		<router-link to="/impressum">Impressum</router-link>
 	</div>
 </template>
 
 <script>
-	import MenuContainer from './components/MenuContainer.vue'
+	import HeaderBar from './components/HeaderBar.vue'
 
 	export default {
 		data () {
@@ -53,7 +38,7 @@
 		},
 
 		components: {
-			MenuContainer
+			HeaderBar
 		},
 	}
 </script>
@@ -64,6 +49,7 @@
 		background-color: #111;
 		color: #aaa;
 		margin: 0;
+		-webkit-tap-highlight-color: #f0ff;
 	}
 
 	body a:link {
@@ -71,44 +57,14 @@
 	}
 
 	body a:visited {
-		color: #666;
+		/color: #666;
+		color: #ddd;
 	}
 </style>
 
 <style scoped>
-	header {
-		font-size: 1.5em;
-		color: #aaa;
-		background-color: #222;
-		display: flex;
-	}
-
-	header .logo {
-		display: inline-block;
-	}
-
-	header .menu-container {
-		flex-grow: 100;
-		box-sizing: border-box;
-	}
-
-	header .user {
-		padding: 0.2em 0em;
-	}
-
 	.content {
 		margin-left: 8px;
 		margin-right: 8px;
 	}
-
-	.rl {
-		text-decoration: none;
-		color: #aaa;
-		padding: 0.2em 1em;
-	}
-
-	.rl:hover {
-		color: #ddd;
-		background-color: #333;
-	}
 </style>

src/components/HeaderBar.vue

@@ -0,0 +1,84 @@
+<template>
+	<header>
+		<div class="logo">
+			<span>RedstoneServer</span>
+		</div>
+
+		<MenuContainer class="menu-container">
+			<router-link class="top-link" :to="link" v-for="(link, text) in menu_entries" :key="link">{{ text }}</router-link>
+		</MenuContainer>
+
+		<div class="user">
+			<div v-if="user">
+				<span>Username: {{ user.username }} </span>
+				<span class="rl" @click="logout">Logout</span>
+			</div>
+			<router-link class="rl" to="/login" v-else>Login</router-link>
+		</div>
+	</header>
+</template>
+
+<script>
+	import MenuContainer from './MenuContainer.vue'
+
+	export default {
+		data () {
+			return {
+				menu_entries: {
+					'Startpage': '/',
+					'Applications': '/applications',
+					'Development Blog': '/devblog',
+				},
+			}
+		},
+
+		computed: {
+			user() {
+				return this.$store.state.user
+			},
+		},
+
+		methods: {
+			logout() {
+				this.core.logout()
+			}
+		},
+
+		components: {
+			MenuContainer
+		},
+	}
+</script>
+
+<style scoped>
+	header {
+		font-size: 1.5em;
+		color: #aaa;
+		background-color: #222;
+		display: flex;
+	}
+
+	header .logo {
+		display: inline-block;
+	}
+
+	header .menu-container {
+		flex-grow: 100;
+		box-sizing: border-box;
+	}
+
+	header .user {
+		padding: 0.2em 0em;
+	}
+
+	.rl {
+		text-decoration: none;
+		color: #aaa;
+		padding: 0.2em 1em;
+	}
+
+	.rl:hover {
+		color: #ddd;
+		background-color: #333;
+	}
+</style>

src/components/MenuContainer.vue

@@ -11,6 +11,7 @@
 </template>
 
 <script>
+	//TODO: Upgrade to a system using Vue for placement.
 	export default {
 		methods: {
 			onResize() {