--- a/client/src/components/Sidebar.vue	Mon Sep 03 12:57:33 2018 +0200
+++ b/client/src/components/Sidebar.vue	Mon Sep 03 14:21:31 2018 +0200
@@ -26,16 +26,7 @@
       return {
         menu: true,
         nav: true,
-        "flex-column": true,
-        "visibility-extended": !this.sidebarCollapsed,
-        "visibility-collapsed": this.sidebarCollapsed
-      };
-    },
-    collapseStyle() {
-      return {
-        collapser: true,
-        collapserextended: !this.sidebarCollapsed,
-        collapsercollapsed: this.sidebarCollapsed
+        "flex-column": true
       };
     },
     sidebarStyle() {
@@ -54,10 +45,6 @@
 <style lang="scss">
 @import "../assets/application.scss";
 
-$sidebar-full-width: 230px;
-$collapser-left-offset: 170px;
-$sidebar-collapsed-width: 0px;
-
 .router-link-exact-active {
   background-color: #f2f2f2;
 }
@@ -66,35 +53,9 @@
   margin-right: $small-offset;
 }
 
-.collapser {
-  position: absolute;
-  top: 0px;
-  z-index: 1000;
-  background-color: #ffffff;
-  font-size: 24px;
-}
-
-.collapserextended {
-  left: $collapser-left-offset;
-  transition: $transition;
-}
-
-.collapsercollapsed {
-  left: 3px;
-  transition: $transition;
-}
-
 .menu {
   height: 90%;
 }
-.visibility-extended {
-  opacity: 100;
-  transition: $transition-slow;
-}
-.visibility-collapsed {
-  opacity: 0;
-  transition: $transition-fast;
-}
 
 .sidebar {
   margin-top: $topbarheight;
@@ -109,12 +70,12 @@
 }
 
 .sidebarcollapsed {
-  width: $sidebar-collapsed-width;
   transition: $transition;
+  left: -250px;
 }
 
 .sidebarextended {
-  width: $sidebar-full-width;
   transition: $transition;
+  left: 0;
 }
 </style>