feat: Show teams on sidebar (#1754)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
Co-authored-by: Sojan <sojan@pepalo.com>

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

@@ -13,6 +13,11 @@
           :key="item.toState"
           :menu-item="item"
         />
+        <sidebar-item
+          v-if="shouldShowTeams"
+          :key="teamSection.toState"
+          :menu-item="teamSection"
+        />
         <sidebar-item
           v-if="shouldShowInboxes"
           :key="inboxSection.toState"
@@ -97,6 +102,7 @@ export default {
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
       accountLabels: 'labels/getLabelsOnSidebar',
+      teams: 'teams/getMyTeams',
     }),
 
     sidemenuItems() {
@@ -125,6 +131,9 @@ export default {
     shouldShowInboxes() {
       return this.sidemenuItems.common.routes.includes(this.currentRoute);
     },
+    shouldShowTeams() {
+      return this.shouldShowInboxes && this.teams.length;
+    },
     inboxSection() {
       return {
         icon: 'ion-folder',
@@ -164,6 +173,24 @@ export default {
         })),
       };
     },
+    teamSection() {
+      return {
+        icon: 'ion-ios-people',
+        label: 'TEAMS',
+        hasSubMenu: true,
+        newLink: true,
+        key: 'team',
+        cssClass: 'menu-title align-justify teams-sidebar-menu',
+        toState: frontendURL(`accounts/${this.accountId}/settings/teams`),
+        toStateName: 'teams_list',
+        children: this.teams.map(team => ({
+          id: team.id,
+          label: team.name,
+          truncateLabel: true,
+          toState: frontendURL(`accounts/${this.accountId}/team/${team.id}`),
+        })),
+      };
+    },
     dashboardPath() {
       return frontendURL(`accounts/${this.accountId}/dashboard`);
     },
@@ -179,6 +206,7 @@ export default {
     this.$store.dispatch('labels/get');
     this.$store.dispatch('inboxes/get');
     this.$store.dispatch('notifications/unReadCount');
+    this.$store.dispatch('teams/get');
     this.setChatwootUser();
   },
   methods: {
@@ -305,4 +333,8 @@ export default {
   margin-left: auto;
   margin-top: auto;
 }
+
+.teams-sidebar-menu + .nested.vertical.menu {
+  padding-left: calc(var(--space-medium) - var(--space-one));
+}
 </style>