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/helpCenter/Sidebar/Sidebar.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="main-nav secondary-menu">
+    <sidebar-header
+      :thumbnail-src="thumbnailSrc"
+      :header-title="headerTitle"
+      :sub-title="subTitle"
+    />
+    <sidebar-search @input="onSearch" />
+    <!-- <transition-group name="menu-list" tag="ul" class="menu vertical"> -->
+    <div name="menu-list" tag="ul" class="menu vertical">
+      <secondary-nav-item
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+        :is-help-center-sidebar="true"
+      />
+    </div>
+    <div name="menu-list" tag="ul" class="menu vertical">
+      <secondary-nav-item
+        v-for="menuItem in additionalSecondaryMenuItems"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        :is-help-center-sidebar="true"
+      />
+    </div>
+    <!-- </transition-group> -->
+  </div>
+</template>
+
+<script>
+import SecondaryNavItem from 'dashboard/components/layout/sidebarComponents/SecondaryNavItem';
+import SidebarSearch from './SidebarSearch';
+import SidebarHeader from './SidebarHeader';
+
+export default {
+  components: {
+    SecondaryNavItem,
+    SidebarSearch,
+    SidebarHeader,
+  },
+  props: {
+    thumbnailSrc: {
+      type: String,
+      default: '',
+    },
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    accessibleMenuItems: {
+      type: Array,
+      default: () => [],
+    },
+    additionalSecondaryMenuItems: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    onSearch(value) {
+      this.$emit('input', value);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.secondary-menu {
+  background: var(--white);
+  border-right: 1px solid var(--s-50);
+  height: 100%;
+  width: var(--space-giga);
+  flex-shrink: 0;
+  overflow: hidden;
+  padding: var(--space-small);
+
+  &:hover {
+    overflow: auto;
+  }
+}
+</style>