rs-frontend/src/App.vue

<template>
	<div id="app">
		<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>

		<p>Website under development, please excuse ugly style and broken/missing features as well as missing legal things.</p>
		<div class="content">
			<router-view/>
		</div>
		<router-link to="/impressum">Impressum</router-link>
	</div>
</template>

<script>
	import MenuContainer from './components/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>
	body {
		font-family: sans-serif;
		background-color: #111;
		color: #aaa;
		margin: 0;
	}

	body a:link {
		color: #ddd;
	}

	body a:visited {
		color: #666;
	}
</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>