[Enhancement] Hide sidebar on tablets (#358)

* [Enhancement] Hide sidebar on tablets

* Remove unnecessary console.log

* Use beforeDestroy

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"
+/>
+`;