From 455e78bf14c7a8277c5d9a313ca1830ddb8e663e Mon Sep 17 00:00:00 2001
From: garrettmills <garrett@glmdev.tech>
Date: Wed, 12 Aug 2020 22:28:52 -0500
Subject: [PATCH] Make sidebar functional on mobule

---
 app/assets/app/dash/SideBar.component.js |  4 +---
 app/assets/less/dashboard.less           | 20 +++++++++++++++++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/assets/app/dash/SideBar.component.js b/app/assets/app/dash/SideBar.component.js
index 04be211..ddcf7bc 100644
--- a/app/assets/app/dash/SideBar.component.js
+++ b/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'] }
diff --git a/app/assets/less/dashboard.less b/app/assets/less/dashboard.less
index 8d5b381..1940591 100644
--- a/app/assets/less/dashboard.less
+++ b/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 {