From febc4bef8353da4f26ee5b5a93e4d42ae9b53705 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranavrajs@gmail.com>
Date: Thu, 12 Dec 2019 12:53:15 +0530
Subject: [PATCH] [Enhancement] Hide sidebar on tablets (#358)

* [Enhancement] Hide sidebar on tablets

* Remove unnecessary console.log

* Use beforeDestroy
---
 .../assets/scss/_foundation-settings.scss     |  8 +--
 .../assets/scss/views/settings/inbox.scss     |  3 -
 .../scss/widgets/_conversation-view.scss      |  7 ++-
 .../assets/scss/widgets/_sidemenu.scss        | 19 +++++++
 .../dashboard/components/ChatList.vue         |  1 +
 .../dashboard/components/SidemenuIcon.vue     | 14 +++++
 app/javascript/dashboard/components/index.js  |  2 +
 .../components/specs/SidemenuIcon.spec.js     | 10 ++++
 .../__snapshots__/SidemenuIcon.spec.js.snap   |  7 +++
 .../dashboard/routes/dashboard/Dashboard.vue  | 55 +++++++++++++++++--
 .../dashboard/settings/SettingsHeader.vue     |  5 +-
 .../routes/dashboard/settings/Wrapper.vue     | 43 +++++++--------
 12 files changed, 136 insertions(+), 38 deletions(-)
 create mode 100644 app/javascript/dashboard/components/SidemenuIcon.vue
 create mode 100644 app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
 create mode 100644 app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index e330c8503..8b31295c3 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/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);
diff --git a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss b/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
index cdcf512b5..df2af2441 100644
--- a/app/javascript/dashboard/assets/scss/views/settings/inbox.scss
+++ b/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);
-    }
   }
 
 }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
index dc511865f..5e5cd87fa 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss
+++ b/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;
     }
diff --git a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss b/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
index 12602cd37..80807d099 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_sidemenu.scss
+++ b/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;
+  }
+}
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 89106b915..2c6f4716d 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/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>
diff --git a/app/javascript/dashboard/components/SidemenuIcon.vue b/app/javascript/dashboard/components/SidemenuIcon.vue
new file mode 100644
index 000000000..e0aef0475
--- /dev/null
+++ b/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>
diff --git a/app/javascript/dashboard/components/index.js b/app/javascript/dashboard/components/index.js
index d80ed3ec5..32999ca9e 100644
--- a/app/javascript/dashboard/components/index.js
+++ b/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,
diff --git a/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js b/app/javascript/dashboard/components/specs/SidemenuIcon.spec.js
new file mode 100644
index 000000000..a4ef517b1
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap b/app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap
new file mode 100644
index 000000000..aeef353fb
--- /dev/null
+++ b/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"
+/>
+`;
diff --git a/app/javascript/dashboard/routes/dashboard/Dashboard.vue b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
index 8de937218..5ffe6cd1c 100644
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue b/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
index 36107d13a..bd1d94622 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/SettingsHeader.vue
+++ b/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();
diff --git a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue b/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
index 700506a12..54c072785 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/Wrapper.vue
+++ b/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;