Feature: Improve label experience (#975)

Co-authored-by: Sojan <sojan@pepalo.com>

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

@@ -18,6 +18,11 @@
           :key="inboxSection.toState"
           :menu-item="inboxSection"
         />
+        <sidebar-item
+          v-if="shouldShowInboxes"
+          :key="labelSection.toState"
+          :menu-item="labelSection"
+        />
       </transition-group>
     </div>
 
@@ -125,6 +130,7 @@ export default {
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
+      accountLabels: 'labels/getLabelsOnSidebar',
     }),
     sidemenuItems() {
       return getSidebarItems(this.accountId);
@@ -170,6 +176,25 @@ export default {
         })),
       };
     },
+    labelSection() {
+      return {
+        icon: 'ion-pound',
+        label: 'LABELS',
+        hasSubMenu: true,
+        key: 'label',
+        cssClass: 'menu-title align-justify',
+        toState: frontendURL(`accounts/${this.accountId}/settings/labels`),
+        toStateName: 'labels_list',
+        children: this.accountLabels.map(label => ({
+          id: label.id,
+          label: label.title,
+          color: label.color,
+          toState: frontendURL(
+            `accounts/${this.accountId}/label/${label.title}`
+          ),
+        })),
+      };
+    },
     dashboardPath() {
       return frontendURL(`accounts/${this.accountId}/dashboard`);
     },