feat: Add the ability to toggle the secondary sidebar in all display breakpoints (#6118)

Co-authored-by: Nithin David <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

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

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

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -1,7 +1,12 @@
 <template>
-  <button @click="onMenuItemClick">
+  <woot-button
-    <fluent-icon class="hamburger--menu" icon="list" />
+    size="small"
-  </button>
+    variant="clear"
+    color-scheme="secondary"
+    icon="list"
+    class="toggle-sidebar"
+    @click="onMenuItemClick"
+  />
 </template>
 
 <script>
@@ -16,13 +21,8 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.hamburger--menu {
+.toggle-sidebar {
-  cursor: pointer;
+  margin-right: var(--space-small);
-  display: none;
+  margin-left: var(--space-minus-small);
-  margin-right: var(--space-normal);
-
-  @media screen and (max-width: 1200px) {
-    display: block;
-  }
 }
 </style>

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -261,14 +261,7 @@ export default {
   width: 20rem;
   flex-shrink: 0;
   overflow-y: hidden;
-
+  position: unset;
-  @include breakpoint(xlarge down) {
-    position: absolute;
-  }
-
-  @include breakpoint(xlarge up) {
-    position: unset;
-  }
 
   &:hover {
     overflow-y: hidden;

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

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SidemenuIcon matches snapshot 1`] = `
-<button>
+<woot-button
-  <fluent-icon
+  class="toggle-sidebar"
-    class="hamburger--menu"
+  color-scheme="secondary"
-    icon="list"
+  icon="list"
-  />
+  size="small"
-</button>
+  variant="clear"
+/>
 `;

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

@@ -2,14 +2,14 @@
   <div class="row app-wrapper">
     <sidebar
       :route="currentRoute"
-      :sidebar-class-name="sidebarClassName"
+      :show-secondary-sidebar="isSidebarOpen"
       @open-notification-panel="openNotificationPanel"
       @toggle-account-modal="toggleAccountModal"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
       @close-key-shortcut-modal="closeKeyShortcutModal"
       @show-add-label-popup="showAddLabelPopup"
     />
-    <section class="app-content columns" :class="contentClassName">
+    <section class="app-content columns">
       <router-view />
       <command-bar />
       <account-selector
@@ -46,6 +46,7 @@ import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAc
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
 import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
 import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
 export default {
   components: {
@@ -57,9 +58,9 @@ export default {
     AddLabelModal,
     NotificationPanel,
   },
+  mixins: [uiSettingsMixin],
   data() {
     return {
-      isSidebarOpen: false,
       isOnDesktop: true,
       showAccountModal: false,
       showCreateAccountModal: false,
@@ -72,44 +73,22 @@ export default {
     currentRoute() {
       return ' ';
     },
-    sidebarClassName() {
+    isSidebarOpen() {
-      if (this.isOnDesktop) {
+      const { show_secondary_sidebar: showSecondarySidebar } = this.uiSettings;
-        return '';
+      return showSecondarySidebar;
-      }
-      if (this.isSidebarOpen) {
-        return 'off-canvas is-open';
-      }
-      return 'off-canvas is-transition-push is-closed';
-    },
-    contentClassName() {
-      if (this.isOnDesktop) {
-        return '';
-      }
-      if (this.isSidebarOpen) {
-        return 'off-canvas-content is-open-left has-transition-push';
-      }
-      return 'off-canvas-content has-transition-push';
     },
   },
   mounted() {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
     bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
   },
   beforeDestroy() {
     bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-    window.removeEventListener('resize', this.handleResize);
   },
   methods: {
-    handleResize() {
-      if (window.innerWidth >= 1200) {
-        this.isOnDesktop = true;
-      } else {
-        this.isOnDesktop = false;
-      }
-    },
     toggleSidebar() {
-      this.isSidebarOpen = !this.isSidebarOpen;
+      this.updateUISettings({
+        show_secondary_sidebar: !this.isSidebarOpen,
+      });
     },
     openCreateAccountModal() {
       this.showAccountModal = false;
@@ -142,8 +121,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.off-canvas-content.is-open-left {
-  transform: translateX(20rem);
-}
-</style>

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -1,20 +1,22 @@
 <template>
   <div v-on-clickaway="closeSearch" class="search-wrap">
-    <div class="search" :class="{ 'is-active': showSearchBox }">
+    <div class="search-header--wrap">
-      <woot-sidemenu-icon />
+      <woot-sidemenu-icon v-if="!showSearchBox" />
-      <div class="icon">
+      <div class="search" :class="{ 'is-active': showSearchBox }">
-        <fluent-icon icon="search" class="search--icon" size="28" />
+        <div class="icon">
+          <fluent-icon icon="search" class="search--icon" size="28" />
+        </div>
+        <input
+          v-model="searchTerm"
+          class="search--input"
+          :placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
+          @focus="onSearch"
+        />
+        <switch-layout
+          :is-on-expanded-layout="isOnExpandedLayout"
+          @toggle="$emit('toggle-conversation-layout')"
+        />
       </div>
-      <input
-        v-model="searchTerm"
-        class="search--input"
-        :placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
-        @focus="onSearch"
-      />
-      <switch-layout
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggle-conversation-layout')"
-      />
     </div>
     <div v-if="showSearchBox" class="results-wrap">
       <div class="show-results">
@@ -153,14 +155,21 @@ export default {
 <style lang="scss" scoped>
 .search-wrap {
   position: relative;
+  padding: var(--space-one) var(--space-normal) var(--space-smaller)
+    var(--space-normal);
+}
+
+.search-header--wrap {
+  display: flex;
+  justify-content: space-between;
+  min-height: var(--space-large);
 }
 
 .search {
   display: flex;
+  flex: 1;
   padding: 0;
   border-bottom: 1px solid transparent;
-  padding: var(--space-one) var(--space-normal) var(--space-smaller)
-    var(--space-normal);
 
   &:hover {
     .search--icon {
@@ -205,6 +214,7 @@ input::placeholder {
   width: 100%;
   max-height: 70vh;
   overflow: auto;
+  left: 0;
 }
 
 .show-results {

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -8,8 +8,7 @@
       @close-key-shortcut-modal="closeKeyShortcutModal"
     />
     <help-center-sidebar
-      v-if="portals.length"
+      v-if="showHelpCenterSidebar"
-      :class="sidebarClassName"
       :header-title="headerTitle"
       :portal-slug="selectedPortalSlug"
       :locale-slug="selectedLocaleInPortal"
@@ -19,7 +18,7 @@
       @open-popover="openPortalPopover"
       @open-modal="onClickOpenAddCategoryModal"
     />
-    <section class="app-content columns" :class="contentClassName">
+    <section class="app-content columns">
       <router-view />
       <command-bar />
       <account-selector
@@ -84,7 +83,6 @@ export default {
   mixins: [portalMixin, uiSettingsMixin],
   data() {
     return {
-      isSidebarOpen: false,
       isOnDesktop: true,
       showShortcutModal: false,
       showNotificationPanel: false,
@@ -103,6 +101,15 @@ export default {
       meta: 'portals/getMeta',
       isFetching: 'portals/isFetchingPortals',
     }),
+    isSidebarOpen() {
+      const {
+        show_help_center_secondary_sidebar: showSecondarySidebar,
+      } = this.uiSettings;
+      return showSecondarySidebar;
+    },
+    showHelpCenterSidebar() {
+      return this.portals.length === 0 ? false : this.isSidebarOpen;
+    },
     selectedPortal() {
       const slug = this.$route.params.portalSlug || this.lastActivePortalSlug;
       if (slug) return this.$store.getters['portals/portalBySlug'](slug);
@@ -112,24 +119,6 @@ export default {
     selectedLocaleInPortal() {
       return this.$route.params.locale || this.defaultPortalLocale;
     },
-    sidebarClassName() {
-      if (this.isOnDesktop) {
-        return '';
-      }
-      if (this.isSidebarOpen) {
-        return 'off-canvas is-open';
-      }
-      return 'off-canvas is-transition-push is-closed';
-    },
-    contentClassName() {
-      if (this.isOnDesktop) {
-        return '';
-      }
-      if (this.isSidebarOpen) {
-        return 'off-canvas-content is-open-left has-transition-push';
-      }
-      return 'off-canvas-content has-transition-push';
-    },
     selectedPortalName() {
       return this.selectedPortal ? this.selectedPortal.name : '';
     },
@@ -248,8 +237,6 @@ export default {
   },
 
   mounted() {
-    window.addEventListener('resize', this.handleResize);
-    this.handleResize();
     bus.$on(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
 
     const slug = this.$route.params.portalSlug;
@@ -259,7 +246,6 @@ export default {
   },
   beforeDestroy() {
     bus.$off(BUS_EVENTS.TOGGLE_SIDEMENU, this.toggleSidebar);
-    window.removeEventListener('resize', this.handleResize);
   },
   updated() {
     const slug = this.$route.params.portalSlug;
@@ -272,15 +258,12 @@ export default {
     }
   },
   methods: {
-    handleResize() {
-      if (window.innerWidth > 1200) {
-        this.isOnDesktop = true;
-      } else {
-        this.isOnDesktop = false;
-      }
-    },
     toggleSidebar() {
-      this.isSidebarOpen = !this.isSidebarOpen;
+      if (this.portals.length > 0) {
+        this.updateUISettings({
+          show_help_center_secondary_sidebar: !this.isSidebarOpen,
+        });
+      }
     },
     async fetchPortalAndItsCategories() {
       await this.$store.dispatch('portals/index');
@@ -322,8 +305,3 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.off-canvas-content.is-open-left.has-transition-push {
-  transform: translateX(var(--space-giga));
-}
-</style>