feat: New sidebar component for help-center (#5017)

* feat: New sidebar component for help-center

* chore: Review fixes

* chore: Minor fixes

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

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

@@ -26,6 +26,9 @@
           :class="{ 'text-truncate': shouldTruncate }"
         >
           {{ label }}
+          <span v-if="isHelpCenterSidebar && childItemCount" class="count-view">
+            {{ childItemCount }}
+          </span>
         </span>
         <span v-if="count" class="badge" :class="{ secondary: !isActive }">
           {{ count }}
@@ -73,6 +76,14 @@ export default {
       type: String,
       default: '',
     },
+    isHelpCenterSidebar: {
+      type: Boolean,
+      default: false,
+    },
+    childItemCount: {
+      type: Number,
+      default: 0,
+    },
   },
   computed: {
     showIcon() {
@@ -155,4 +166,19 @@ $label-badge-size: var(--space-slab);
   color: var(--s-600);
   font-weight: var(--font-weight-bold);
 }
+
+.count-view {
+  background: var(--s-50);
+  border-radius: var(--border-radius-normal);
+  color: var(--s-600);
+  font-size: var(--font-size-micro);
+  font-weight: var(--font-weight-bold);
+  margin-left: var(--space-smaller);
+  padding: var(--space-zero) var(--space-smaller);
+
+  &.is-active {
+    background: var(--w-50);
+    color: var(--w-500);
+  }
+}
 </style>