--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/User.vue	Fri Sep 07 08:40:21 2018 +0200
@@ -0,0 +1,38 @@
+<template>
+  <div class="ui-element d-flex justify-content-around usermanagement">
+    <img class="userpic" src="../assets/user.png">
+    <span class="username align-self-center">{{ userinfo }}</span>
+    <span class="logout align-self-center" @click="logoff">
+      <i class="fa fa-power-off"></i>
+    </span>
+  </div>
+</template>
+
+<style lang="scss">
+.usermanagement {
+  background: white;
+  width: 150px;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+}
+</style>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  name: "user",
+  data() {
+    return {};
+  },
+  methods: {
+    logoff() {
+      this.$store.commit("user/clear_auth");
+      this.$store.commit("application/resetSidebar");
+      this.$router.push("/login");
+    }
+  },
+  computed: {
+    ...mapGetters("user", ["userinfo"])
+  }
+};
+</script>