Make sidebar functional on mobule

app/assets/app/dash/SideBar.component.js

@@ -6,7 +6,7 @@ import { session } from '../service/Session.service.js'
 
 const template = `
 <div class="bg-light border-right coreid-sidebar-wrapper" id="sidebar-wrapper" v-bind:class="{ collapsed: isCollapsed }">
-    <div class="sidebar-heading">{{ app_name }}</div>
+    <div class="sidebar-heading"><i id="sidebar-collapser" @click="toggle()" class="fa fa-arrow-left"></i> {{ app_name }}</div>
     <div class="list-group list-group-flush">
         <a
             href="#"
@@ -18,8 +18,6 @@ const template = `
 </div>
 `
 
-// TODO figure out why this doesn't show up in mobile layouts
-
 export default class SideBarComponent extends Component {
     static get selector() { return 'coreid-sidebar' }
     static get props() { return ['app_name'] }

app/assets/less/dashboard.less

@@ -28,7 +28,7 @@ body {
   margin-left: 0;
 }
 
-@media (min-width: 768px) {
+//@media (min-width: 768px) {
   #sidebar-wrapper {
     margin-left: 0;
   }
@@ -41,6 +41,24 @@ body {
   #wrapper.toggled #sidebar-wrapper {
     margin-left: -15rem;
   }
+
+  #sidebar-collapser {
+    display: none;
+  }
+//}
+
+@media (max-width: 768px) {
+  #sidebar-wrapper {
+    position: absolute;
+    z-index: 1000;
+  }
+
+  #sidebar-collapser {
+    display: inline;
+    margin-right: 15px;
+    color: #666;
+    font-size: 15px;
+  }
 }
 
 .coreid-sidebar-wrapper {