--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/application/Topbar.vue	Fri Sep 07 11:13:56 2018 +0200
@@ -0,0 +1,73 @@
+<template>
+  <div class="topbar d-flex flex-row justify-content-between">
+    <div>
+      <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i>
+    </div>
+    <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer">
+      <div class="input-group-prepend">
+        <span class="input-group-text searchlabel" for="search">
+          <i class="fa fa-search"></i>
+        </span>
+      </div>
+      <input id="search" type="text" class="form-control ui-element search searchbar">
+    </div>
+    <Layers v-if="routeName != 'usermanagement'"></Layers>
+  </div>
+</template>
+
+<style lang="scss">
+@import "./assets/application.scss";
+
+.menubutton {
+  background-color: white;
+  padding: 0.5rem;
+}
+
+.searchcontainer {
+  margin-left: 20vw;
+  margin-right: auto;
+  width: 50vw !important;
+  height: 39px;
+  border-radius: 0.25rem;
+}
+
+.searchbar {
+  margin-left: auto;
+  margin-right: auto;
+  height: 50px;
+}
+
+.topbar {
+  padding-top: 2vh;
+  margin-right: 1vw;
+  margin-left: 0;
+}
+
+.logout {
+  font-size: x-large;
+}
+</style>
+
+
+<script>
+import Layers from "../layers/Layers";
+
+export default {
+  name: "topbar",
+  components: {
+    Layers: Layers
+  },
+  methods: {
+    toggleSidebar() {
+      this.$store.commit("application/toggleSidebar");
+    }
+  },
+  computed: {
+    routeName() {
+      const routeName = this.$route.name;
+      console.log(routeName);
+      return routeName;
+    }
+  }
+};
+</script>