--- a/client/src/components/usermanagement/Usermanagement.vue	Mon Dec 17 15:45:39 2018 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Mon Dec 17 15:54:27 2018 +0100
@@ -1,6 +1,6 @@
 <template>
   <div class="main d-flex flex-row">
-    <div :class="spacerStyle"></div>
+    <Spacer></Spacer>
     <div class="d-flex content flex-column">
       <div class="d-flex flex-row">
         <div :class="userlistStyle">
@@ -131,19 +131,6 @@
 .userdetails {
   width: 50%;
 }
-.spacer {
-  height: 100vh;
-  margin-left: $offset;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
 
 .main {
   height: 100vh;
@@ -211,6 +198,7 @@
 import store from "../../store";
 import { mapGetters, mapState } from "vuex";
 import { displayError } from "../../lib/errors.js";
+import Spacer from "../Spacer";
 
 export default {
   name: "userview",
@@ -222,20 +210,12 @@
     };
   },
   components: {
-    Userdetail
+    Userdetail,
+    Spacer
   },
   computed: {
     ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
     ...mapState("application", ["showSidebar"]),
-    spacerStyle() {
-      return [
-        "spacer",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
-    },
     users() {
       let users = [...this.$store.getters["usermanagement/users"]];
       users.sort((a, b) => {