Remove sidebar toggle button jumps (#961)

* Remove sidebar toggle button jumps

* Fix width

packages/apps/src/SideBar/SideBar.css

@@ -52,6 +52,7 @@
     flex-flow: column;
     height: auto;
     left: 0;
+    position: relative;
     transition: left 0.3s linear;
     width: 100%;
 
@@ -59,7 +60,7 @@
       display: flex;
       height: 100vh;
       margin: 0;
-      position: sticky;
+      padding-bottom: 5rem;
       top: 0px;
       width: 100%;
     }
@@ -95,29 +96,20 @@
     }
 
     .apps--SideBar-collapse {
-      align-items: flex-end;
       background: #3f3f3f;
       bottom: 0;
-      display: flex;
-      flex-direction: row wrap;
-      flex-grow: 1;
-      justify-content: flex-start;
-      padding: 3.5rem 0 1rem 0;
+      left: 0;
+      padding: 1rem 0 0.75rem 0.5rem;
       position: sticky;
+      right: 0;
+      text-align: left;
       width: 100%;
 
-      /* aligned with hidden tesxt, don't let button jump - or at least ... less */
-      &.collapsed {
-        padding-left: 0.5rem;
-      }
-
       .ui.circular.button {
-        bottom: 0.75rem;
         background: white !important;
         color: #3f3f3f !important;
         box-shadow: 0 0 0 1px #eee inset !important;
         margin: 0;
-        position: absolute;
         transition: transform 0.15s;
       }
     }
@@ -139,7 +131,10 @@
 
   &.expanded .apps--SideBar {
     text-align: left;
-    padding-left: 0.7rem;
+
+    .ui.vertical.menu {
+      padding-left: 0.7rem;
+    }
   }
 
   &.collapsed .apps--SideBar {

packages/apps/src/SideBar/index.tsx

@@ -96,8 +96,8 @@ class SideBar extends React.PureComponent<Props> {
                   : <NodeInfo />
               }
             </div>
-            {this.renderCollapse()}
           </Menu>
+          {this.renderCollapse()}
           {this.renderToggleBar()}
         </div>
       </Responsive>