Styling Header, more mobile friendly

- Providing an alternative logo.
- Adding a compression mode, doesn't work on mobile yet. Only applies on username, to be removed, cause weird.
- Increasing font size.

src/components/HeaderBar.vue

@@ -1,7 +1,12 @@
 <template>
-	<header>
+	<header ref="header">
 		<div class="logo">
-			<span>RedstoneServer</span>
+			<div class="small">
+				<span> RS </span>
+			</div>
+			<div class="big">
+				<span> RedstoneServer </span>
+			</div>
 		</div>
 
 		<nav ref="navigation">
@@ -18,7 +23,8 @@
 
 		<div class="user">
 			<div v-if="user">
-				<span>Username: {{ user.username }} </span>
+				<span v-if="!compressed">Username: {{ user.username }} </span>
+				<span v-else>Hi, {{ user.username }} </span>
 				<span class="link" @click="logout">Logout</span>
 			</div>
 			<router-link class="link" to="/login" v-else>Login</router-link>
@@ -46,6 +52,7 @@
 				},
 				primary: [],
 				secondary: [],
+				compressed: false,
 			}
 		},
 		created() {
@@ -62,6 +69,7 @@
 			updateMenu() {
 				//Empty to measure the whole available space.
 				this.primary = []
+				this.compressed = false
 
 				this.$nextTick(() => {
 					let menubar = this.$refs.topbar
@@ -93,6 +101,14 @@
 						}
 
 						this.secondary = this.secondary.concat(this.intLinks.secondary)
+
+						//TODO: Improve, set dropdown to middle when this mode.
+						//Check if there is still no space, if so, minimized view.
+						this.$nextTick(() => {
+							if(this.$refs.header.scrollWidth > (window.innerWidth || document.documentElement.clientWidth)) {
+								this.compressed = true
+							}
+						})
 					})
 				})
 			},
@@ -138,9 +154,16 @@
 
 		white-space: nowrap;
 		background-color: #222;
+
+		font-size: 1.5em;
 	}
 	nav {
 		flex-grow: 100;
+
+		/* try permanent? */
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	/*
@@ -194,4 +217,25 @@
 		border-right: none;
 	}
 
+	/*
+	Header compression:
+	*/
+	.logo > .small {
+		display: none;
+	}
+
+	@media (max-width: 600px) {
+		/* Switch to the small logo */
+		.logo > .small {
+			display: initial;
+		}
+		.logo > .big {
+			display: none;
+		}
+
+		/* Center the dropdown menu */
+		.wrapper {
+			position: initial;
+		}
+	}
 </style>