Added old header scss back ;)

frontend/components/App.vue

@@ -21,8 +21,6 @@
 </script>
 
 <style lang="sass">
-	@import 'node_modules/vuestrap/bootstrap/bootstrap';
-
 	* { box-sizing: border-box; font-family: Roboto, sans-serif; }
 	html {
 		width: 100%;

frontend/components/MusareHeader.vue

@@ -1,36 +1,61 @@
 <template>
 	<header>
-		<vs-navbar fixed="top" type="light" variant="default" full>
-			<a class="navbar-brand" href="#">Musare</a>
-			<vs-nav type="navbar" class="pull-xs-right">
-				<vs-nav-item link="#">The Project</vs-nav-item>
-				<vs-nav-item link="#">Donate</vs-nav-item>
-				<vs-nav-item link="#">
-					<vs-dropdown text="Account" size="md" variant="primary" :arrow="arrow" :caret="false">
-						<ul class="dropdown-menu dropdown-menu-left">
-							<li><a class="dropdown-item" href="#">Login</a></li>
-							<li><a class="dropdown-item" href="#">Register</a></li>
-						</ul>
-					</vs-dropdown>
-				</vs-nav-item>
-			</vs-nav>
-		</vs-navbar>
+		<div id="header-home">
+			<div class="title">Musare</div>
+			<div class="link">Account&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></div>
+			<div class="link">Donate</div>
+			<div class="link">The Project</div>
+		</div>
 	</header>
 </template>
 
 <script>
-	import vuestrapBase from 'vuestrap-base-components'
 	export default {
 		data() {
 			return {
 				title: "Musare ;)"
 			}
-		},
-		components: {
-			'vs-navbar': vuestrapBase.navbar,
-			'vs-nav':  vuestrapBase.nav,
-			'vs-nav-item': vuestrapBase.navItem,
-			'vs-dropdown': vuestrapBase.dropdown
 		}
 	}
 </script>
+
+<style lang="sass" scoped>
+	header {
+		width: 100%;
+		height: 64px;
+		line-height: 64px;
+		text-align: center;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	#header-home {
+		width: 100%;
+		height: 100%;
+		background-color: #424242;
+
+		.title {
+			float: left;
+			height: 100%;
+			color: white;
+			padding: 0 16px 0 16px;
+			font-weight: 300;
+			font-size: 32px;
+			cursor: pointer;
+		}
+
+		.link {
+			z-index: 101;
+			position: relative;
+			float: right;
+			height: 100%;
+			color: white;
+			padding: 0 16px 0 16px;
+			cursor: pointer;
+		}
+
+		.title:hover, .link:hover {
+			cursor: pointer;
+			background-color: #393939;
+		}
+	}
+</style>

frontend/package.json

@@ -25,8 +25,6 @@
     "vue-html-loader": "^1.2.3",
     "vue-loader": "^8.5.2",
     "vue-style-loader": "^1.0.0",
-    "vuestrap": "^1.0.3",
-    "vuestrap-base-components": "^0.8.10",
     "webpack": "^1.13.2",
     "webpack-dev-server": "^1.15.1"
   },