start adding base template

src/components/topbar.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="topbar">
+	    <div class="logo"><a href="#"><img src="project-files/img/cms_logo.png" alt=""></a></div>
+	    <div class="name">Meine Website</div>
+	    <a class="navbutton"><i class="icon icon-menu" aria-hidden="true"></i></a>
+	    <div class="clear"></div>
+	</div>
+</template>
+
+<style lang="less">
+	@import "../mixins.less";
+
+	.topbar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0px;
+		background: @cms_bg;
+		height: 40px;
+		z-index: 1500;
+
+		&>.logo {
+			display: block;
+			width: 70px;
+			height: 40px;
+			float: left;
+			position: relative;
+
+			a {
+				display: block;
+				width: 100%;
+				height: 100%;
+
+                &:hover {
+                    background: rgba(40,183,141,0.3);
+                }
+			}
+
+			img {
+				width:32px;
+				height:auto;
+				margin:0 auto;
+				padding-top:4px;
+				display:block;
+			}
+		}
+
+        &>.name {
+            float: left;
+            width: auto;
+            line-height: 40px;
+            color: white;
+            padding-left: 15px;
+        }
+
+        &>.navbutton {
+            display: block;
+            float: left;
+            font-size: 22px;
+            color: white;
+            width: auto;
+            height: 100%;
+            margin-left: 40px;
+            height: 40px;
+            width: 40px;
+            /*padding:3px 10px 0px 5px;*/
+            padding-top: 4px;
+            cursor: pointer;
+            text-align: center;
+
+            &:hover {
+                background:rgba(40,183,141,0.3);
+            }
+        }
+	}
+</style>
+
+<script>
+export default {
+    name: "Topbar"
+}
+</script>