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`);
     },

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

@@ -36,7 +36,13 @@
               v-if="computedInboxClass(child)"
               class="inbox-icon"
               :class="computedInboxClass(child)"
-            ></i>
+            />
+            <span
+              v-if="child.color"
+              class="label-color--display"
+              :style="{ backgroundColor: child.color }"
+            />
+
             {{ child.label }}
           </div>
         </a>
@@ -126,8 +132,22 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+
 .sub-menu-title {
   display: flex;
   justify-content: space-between;
 }
+
+.wrap {
+  display: flex;
+  align-items: center;
+}
+
+.label-color--display {
+  border-radius: $space-smaller;
+  height: $space-normal;
+  margin-right: $space-small;
+  width: $space-normal;
+}
 </style>