[Enhancement] Hide sidebar on tablets (#358)

* [Enhancement] Hide sidebar on tablets

* Remove unnecessary console.log

* Use beforeDestroy

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -456,12 +456,12 @@ $meter-fill-bad: $alert-color;
 // --------------
 
 $offcanvas-sizes: (
-  small: 250px,
-  medium: 350px,
+  small: 23rem,
+  medium: 23rem,
 );
 $offcanvas-vertical-sizes: (
-  small: 250px,
-  medium: 350px,
+  small: 23rem,
+  medium: 23rem,
 );
 $offcanvas-background: $light-gray;
 $offcanvas-shadow: 0 0 10px rgba($black, 0.7);

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -17,9 +17,6 @@
     @include flex;
     @include flex-align($x: center, $y: middle);
     @include margin($zero);
-    > span {
-      @include padding($zero $space-small $zero $space-small);
-    }
   }
 
 }

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -3,9 +3,14 @@
   flex-direction: column;
 
   .chat-list__top {
+    @include flex;
     @include padding($space-normal $zero $space-small $zero);
+
+    align-items: center;
+    justify-content: space-between;
+
     .page-title {
-      float: left;
+      @include flex;
       margin-bottom: $zero;
       margin-left: $space-normal;
     }

app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss

@@ -126,3 +126,22 @@
     margin-top: auto;
   }
 }
+
+.hamburger--menu {
+  cursor: pointer;
+  display: none;
+  margin-right: $space-normal;
+
+  @media screen and (max-width: 1200px){
+    display: block;
+  }
+}
+
+.header--icon {
+  display: block;
+  margin-right: $space-normal;
+
+  @media screen and (max-width: 1200px){
+    display: none;
+  }
+}

app/javascript/dashboard/components/ChatList.vue

@@ -2,6 +2,7 @@
   <div class="conversations-sidebar  medium-4 columns">
     <div class="chat-list__top">
       <h1 class="page-title">
+        <woot-sidemenu-icon></woot-sidemenu-icon>
         {{ getInboxName }}
       </h1>
       <chat-filter @statusFilterChange="getDataForStatusTab"></chat-filter>

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <i class="ion-android-menu hamburger--menu" @click="onMenuItemClick"></i>
+</template>
+
+<script>
+/* global bus */
+export default {
+  methods: {
+    onMenuItemClick() {
+      bus.$emit('sidemenu_icon_click');
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/index.js

@@ -7,6 +7,7 @@ import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
 import ModalHeader from './ModalHeader';
 import ReportStatsCard from './widgets/ReportStatsCard';
+import SidemenuIcon from './SidemenuIcon';
 import Spinner from './Spinner';
 import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
@@ -19,6 +20,7 @@ const WootUIKit = {
   Modal,
   ModalHeader,
   ReportStatsCard,
+  SidemenuIcon,
   Spinner,
   SubmitButton,
   Tabs,

app/javascript/dashboard/components/specs/SidemenuIcon.spec.js

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import SidemenuIcon from '../SidemenuIcon';
+
+describe('SidemenuIcon', () => {
+  test('matches snapshot', () => {
+    const wrapper = mount(SidemenuIcon);
+    expect(wrapper.isVueInstance()).toBeTruthy();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SidemenuIcon matches snapshot 1`] = `
+<i
+  class="ion-android-menu hamburger--menu"
+/>
+`;

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;