[Enhancement] Hide sidebar on tablets (#358)

* [Enhancement] Hide sidebar on tablets

* Remove unnecessary console.log

* Use beforeDestroy

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -1,27 +1,72 @@
 <template>
   <div class="row app-wrapper">
-    <sidebar :route="currentRoute"></sidebar>
-    <router-view></router-view>
+    <sidebar :route="currentRoute" :class="sidebarClassName"></sidebar>
+    <section class="app-content columns" :class="contentClassName">
+      <router-view></router-view>
+    </section>
   </div>
 </template>
 
 <script>
-/* eslint no-console: 0 */
+/* global bus */
 import Sidebar from '../../components/layout/Sidebar';
 
 export default {
+  components: {
+    Sidebar,
+  },
   props: {
     mainViewComponent: String,
     sidebarMenu: String,
     page: String,
   },
-  components: {
-    Sidebar,
+  data() {
+    return {
+      isSidebarOpen: false,
+      isOnDesktop: true,
+    };
   },
   computed: {
     currentRoute() {
       return ' ';
     },
+    sidebarClassName() {
+      if (this.isOnDesktop) {
+        return '';
+      }
+      if (this.isSidebarOpen) {
+        return 'off-canvas is-open ';
+      }
+      return 'off-canvas position-left is-transition-push is-closed';
+    },
+    contentClassName() {
+      if (this.isOnDesktop) {
+        return '';
+      }
+      if (this.isSidebarOpen) {
+        return 'off-canvas-content is-open-left has-transition-push has-position-left';
+      }
+      return 'off-canvas-content';
+    },
+  },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+    this.handleResize();
+    bus.$on('sidemenu_icon_click', () => {
+      this.isSidebarOpen = !this.isSidebarOpen;
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    handleResize() {
+      if (window.innerWidth > 1200) {
+        this.isOnDesktop = true;
+      } else {
+        this.isOnDesktop = false;
+      }
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="settings-header">
     <h1 class="page-title">
+      <woot-sidemenu-icon></woot-sidemenu-icon>
       <back-button v-if="!showButton"></back-button>
-      <i :class="icon"></i>
+      <i :class="iconClass"></i>
       <span>{{ headerTitle }}</span>
     </h1>
     <router-link
@@ -39,7 +40,7 @@ export default {
   },
   computed: {
     iconClass() {
-      return `icon ${this.props.icon}`;
+      return `icon ${this.icon} header--icon`;
     },
     currentRole() {
       const { role } = Auth.getCurrentUser();

app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue

@@ -1,21 +1,17 @@
 <template>
-  <section class="app-content columns">
-    <div class="view-box columns bg-light">
-      <settings-header
-        button-route="new"
-        :icon="icon"
-        :header-title="$t(headerTitle)"
-        :button-text="$t(headerButtonText)"
-        :show-button="showButton()"
-        :show-new-button="showNewButton()"
-      />
-        <!-- <transition name="slide-fade"> -->
-          <keep-alive>
-            <router-view></router-view>
-          </keep-alive>
-        <!-- </transition> -->
-    </div>
-  </section>
+  <div class="view-box columns bg-light">
+    <settings-header
+      button-route="new"
+      :icon="icon"
+      :header-title="$t(headerTitle)"
+      :button-text="$t(headerButtonText)"
+      :show-button="showButton()"
+      :show-new-button="showNewButton()"
+    />
+    <keep-alive>
+      <router-view></router-view>
+    </keep-alive>
+  </div>
 </template>
 
 <script>
@@ -23,9 +19,8 @@
 import SettingsHeader from './SettingsHeader';
 
 export default {
-  data() {
-    return {
-    };
+  components: {
+    SettingsHeader,
   },
   props: {
     headerTitle: String,
@@ -33,8 +28,8 @@ export default {
     icon: String,
     newButtonRoutes: Array,
   },
-  components: {
-    SettingsHeader,
+  data() {
+    return {};
   },
   computed: {
     currentPage() {
@@ -44,7 +39,9 @@ export default {
   methods: {
     showButton() {
       /* eslint-disable no-unneeded-ternary */
-      return this.newButtonRoutes ? this.newButtonRoutes.indexOf(this.currentPage) > -1 : true;
+      return this.newButtonRoutes
+        ? this.newButtonRoutes.indexOf(this.currentPage) > -1
+        : true;
     },
     showNewButton() {
       return this.newButtonRoutes ? true : false;