--- a/client/src/components/Logs.vue	Mon Dec 17 15:22:22 2018 +0100
+++ b/client/src/components/Logs.vue	Mon Dec 17 15:45:39 2018 +0100
@@ -1,7 +1,7 @@
 <template>
   <div class="main d-flex flex-column">
     <div class="d-flex flex-row">
-      <div :class="spacer"></div>
+      <Spacer></Spacer>
       <div class="card logs shadow-xs mt-3 mr-3">
         <h6
           class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
@@ -91,19 +91,6 @@
   transition: $transition-fast;
 }
 
-.spacer {
-  height: 90vh;
-}
-
-.spacer-collapsed {
-  min-width: $icon-width + $offset;
-  transition: $transition-fast;
-}
-
-.spacer-expanded {
-  min-width: $sidebar-width + $offset;
-}
-
 .statusline {
   position: absolute;
   right: 0;
@@ -133,6 +120,7 @@
 import { mapState } from "vuex";
 import { HTTP } from "../lib/http.js";
 import "../../node_modules/highlight.js/styles/paraiso-dark.css";
+import Spacer from "./Spacer";
 import Vue from "vue";
 import VueHighlightJS from "vue-highlightjs";
 Vue.use(VueHighlightJS);
@@ -142,6 +130,9 @@
 
 export default {
   name: "logs",
+  components: {
+    Spacer
+  },
   mounted() {
     this.fetch("system/log/apache2/access.log", ACCESSLOG);
   },
@@ -183,15 +174,6 @@
         active: this.currentLog == ERRORLOG,
         "nav-link": true
       };
-    },
-    spacer() {
-      return [
-        "spacer ml-3",
-        {
-          "spacer-expanded": this.showSidebar,
-          "spacer-collapsed": !this.showSidebar
-        }
-      ];
     }
   }
 };