chore: Sidebar improvements in small screens (#5400)

* chore: Sidebar improvements in small screens

* chore: Minor fixes

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -11,25 +11,27 @@
       @key-shortcut-modal="toggleKeyShortcutModal"
       @open-notification-panel="openNotificationPanel"
     />
-    <secondary-sidebar
+    <div class="secondary-sidebar">
-      v-if="showSecondarySidebar"
+      <secondary-sidebar
-      :account-id="accountId"
+        v-if="showSecondarySidebar"
-      :inboxes="inboxes"
+        :class="sidebarClassName"
-      :labels="labels"
+        :account-id="accountId"
-      :teams="teams"
+        :inboxes="inboxes"
-      :custom-views="customViews"
+        :labels="labels"
-      :menu-config="activeSecondaryMenu"
+        :teams="teams"
-      :current-role="currentRole"
+        :custom-views="customViews"
-      :is-on-chatwoot-cloud="isOnChatwootCloud"
+        :menu-config="activeSecondaryMenu"
-      @add-label="showAddLabelPopup"
+        :current-role="currentRole"
-      @toggle-accounts="toggleAccountModal"
+        :is-on-chatwoot-cloud="isOnChatwootCloud"
-    />
+        @add-label="showAddLabelPopup"
+        @toggle-accounts="toggleAccountModal"
+      />
+    </div>
   </aside>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
-
 import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
@@ -58,6 +60,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    sidebarClassName: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
@@ -214,6 +220,14 @@ export default {
     width: 40rem;
   }
 }
+.off-canvas-content.is-open-left {
+  transform: translateX(18.8rem);
+}
+
+.secondary-sidebar {
+  overflow-y: auto;
+  height: 100%;
+}
 
 .account-selector {
   cursor: pointer;
@@ -271,6 +285,8 @@ export default {
 }
 
 .secondary-menu .nested.vertical.menu {
+  overflow-y: auto;
+  height: 100%;
   margin-left: var(--space-small);
 }
 </style>

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

@@ -13,8 +13,9 @@
       <div v-if="showSwitchButton" class="account-context--switch-group">
         <woot-button
           variant="clear"
+          size="tiny"
           icon="arrow-swap"
-          class="cursor-pointer"
+          class="switch-button"
           @click="$emit('toggle-accounts')"
         >
           {{ $t('SIDEBAR.SWITCH') }}
@@ -54,8 +55,7 @@ export default {
   border: 1px solid var(--color-border);
   font-size: var(--font-size-mini);
   padding: var(--space-small);
-  margin-bottom: var(--space-small);
+  margin: var(--space-small) var(--space-small) 0 var(--space-small);
-  width: 100%;
   position: relative;
 
   &:hover {
@@ -68,6 +68,10 @@ export default {
   }
 }
 
+.switch-button {
+  margin-right: var(--space-small);
+}
+
 .account-context--switch-group {
   --overlay-shadow: linear-gradient(
     to right,

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

@@ -242,17 +242,32 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '~dashboard/assets/scss/woot';
+
 .secondary-menu {
   background: var(--white);
   border-right: 1px solid var(--s-50);
   height: 100%;
-  width: 19rem;
+  width: 20rem;
   flex-shrink: 0;
-  overflow: hidden;
+  overflow-y: hidden;
-  padding: var(--space-small);
+
+  @include breakpoint(xlarge down) {
+    position: absolute;
+  }
+
+  @include breakpoint(xlarge up) {
+    position: unset;
+  }
 
   &:hover {
-    overflow: auto;
+    overflow-y: hidden;
+  }
+
+  .menu {
+    padding: var(--space-small);
+    overflow-y: auto;
+    height: 94%;
   }
 }
 </style>

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

@@ -2,7 +2,7 @@
   <div class="row app-wrapper">
     <sidebar
       :route="currentRoute"
-      :class="sidebarClassName"
+      :sidebar-class-name="sidebarClassName"
       @open-notification-panel="openNotificationPanel"
       @toggle-account-modal="toggleAccountModal"
       @open-key-shortcut-modal="toggleKeyShortcutModal"
@@ -44,8 +44,8 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import WootKeyShortcutModal from 'dashboard/components/widgets/modal/WootKeyShortcutModal';
 import AddAccountModal from 'dashboard/components/layout/sidebarComponents/AddAccountModal';
 import AccountSelector from 'dashboard/components/layout/sidebarComponents/AccountSelector';
-import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel.vue';
+import AddLabelModal from 'dashboard/routes/dashboard/settings/labels/AddLabel';
-import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel.vue';
+import NotificationPanel from 'dashboard/routes/dashboard/notifications/components/NotificationPanel';
 
 export default {
   components: {
@@ -77,7 +77,7 @@ export default {
         return '';
       }
       if (this.isSidebarOpen) {
-        return 'off-canvas position-left is-transition-push is-open';
+        return 'off-canvas is-open';
       }
       return 'off-canvas is-transition-push is-closed';
     },
@@ -86,7 +86,7 @@ export default {
         return '';
       }
       if (this.isSidebarOpen) {
-        return 'off-canvas-content is-open-left has-transition-push has-position-left';
+        return 'off-canvas-content is-open-left has-transition-push';
       }
       return 'off-canvas-content has-transition-push';
     },
@@ -144,6 +144,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .off-canvas-content.is-open-left {
-  transform: translateX(25.4rem);
+  transform: translateX(20rem);
 }
 </style>

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

@@ -273,3 +273,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.off-canvas-content.is-open-left.has-transition-push {
+  transform: translateX(var(--space-giga));
+}
+</style>

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

@@ -87,6 +87,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
+@import '~dashboard/assets/scss/woot';
 .secondary-menu {
   background: var(--white);
   border-right: 1px solid var(--s-50);
@@ -96,6 +97,14 @@ export default {
   overflow: hidden;
   padding: var(--space-small);
 
+  @include breakpoint(xlarge down) {
+    position: absolute;
+  }
+
+  @include breakpoint(xlarge up) {
+    position: unset;
+  }
+
   &:hover {
     overflow: auto;
   }

app/javascript/dashboard/routes/dashboard/notifications/routes.js

@@ -11,6 +11,7 @@ export const routes = [
       headerTitle: 'NOTIFICATIONS_PAGE.HEADER',
       icon: 'alert',
       showNewButton: false,
+      showSidemenuIcon: false,
     },
     children: [
       {

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

@@ -1,7 +1,7 @@
 <template>
   <div class="settings-header">
     <h1 class="page-title">
-      <woot-sidemenu-icon />
+      <woot-sidemenu-icon v-if="showSidemenuIcon" />
       <back-button
         v-if="showBackButton"
         :button-label="backButtonLabel"
@@ -60,6 +60,10 @@ export default {
       type: String,
       default: '',
     },
+    showSidemenuIcon: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     ...mapGetters({

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

@@ -8,6 +8,7 @@
       :show-back-button="showBackButton"
       :back-url="backUrl"
       :show-new-button="showNewButton"
+      :show-sidemenu-icon="showSidemenuIcon"
     />
     <keep-alive v-if="keepAlive">
       <router-view />
@@ -44,6 +45,10 @@ export default {
       type: [String, Object],
       default: '',
     },
+    showSidemenuIcon: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {};