Fix/Improve padding in HeaderBar

Had to add the padder into all clickables.
The User section now uses the small and big classes.
Removed compressed.

src/components/HeaderBar.vue

@@ -14,7 +14,7 @@
 				<router-link class="t_link link padder" :to="element.val" v-for="element in primary" :key="element.key">{{ element.key }}</router-link>
 			</div>
 			<div class="wrapper">
-				<span class="t_link_d t_link link" ref="dropdownArrow">VV</span>
+				<span class="t_link_d t_link link padder" ref="dropdownArrow">VV</span>
 				<div class="dropdown">
 					<router-link class="d_link link" :to="element.val" v-for="element in secondary" :key="element.key">{{ element.key }}</router-link>
 				</div>
@@ -23,11 +23,16 @@
 
 		<div class="user padder">
 			<div v-if="user">
-				<span v-if="!compressed">Username: {{ user.username }} </span>
-				<span v-else>Hi, {{ user.username }} </span>
-				<span class="link" @click="logout">Logout</span>
+				<div class="big">
+					<span>Username: {{ user.username }} </span>
+					<span class="link padder" @click="logout">Logout</span>
+				</div>
+				<div class="small">
+					<span>Hi, {{ user.username }} </span>
+					<span class="link padder" @click="logout">Logout</span>
+				</div>
 			</div>
-			<router-link class="link" to="/login" v-else>Login</router-link>
+			<router-link class="link padder" to="/login" v-else>Login</router-link>
 		</div>
 	</header>
 </template>
@@ -52,7 +57,6 @@
 				},
 				primary: [],
 				secondary: [],
-				compressed: false,
 			}
 		},
 		created() {
@@ -101,14 +105,6 @@
 						}
 
 						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
-							}
-						})
 					})
 				})
 			},
@@ -174,6 +170,9 @@
 		display: none;
 
 		background-color: #222;
+
+		/* Padder fix */
+		margin-top: 0.2em;
 		
 		right: 50%;
 		transform: translateX(50%);
@@ -220,7 +219,7 @@
 	/*
 	Header compression:
 	*/
-	.logo > .small {
+	.small {
 		display: none;
 	}
 
@@ -238,10 +237,10 @@
 	*/
 	@media (max-width: 600px) {
 		/* Switch to the small logo */
-		.logo > .small {
+		.small {
 			display: initial;
 		}
-		.logo > .big {
+		.big {
 			display: none;
 		}