diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js
new file mode 100644
index 000000000..245eded8b
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.stories.js
@@ -0,0 +1,134 @@
+import { action } from '@storybook/addon-actions';
+import Sidebar from './Sidebar';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail';
+
+export default {
+ title: 'Components/Help Center/Sidebar',
+ component: { Sidebar, Thumbnail },
+ argTypes: {
+ thumbnailSrc: {
+ defaultValue: '',
+ control: {
+ type: 'text',
+ },
+ },
+ headerTitle: {
+ defaultValue: '',
+ control: {
+ type: 'text',
+ },
+ },
+ subTitle: {
+ defaultValue: '',
+ control: {
+ type: 'text',
+ },
+ },
+ accessibleMenuItems: [],
+ additionalSecondaryMenuItems: [],
+ },
+};
+
+const Template = (args, { argTypes }) => ({
+ props: Object.keys(argTypes),
+ components: { Sidebar },
+ template: '',
+});
+
+export const HelpCenterSidebarView = Template.bind({});
+HelpCenterSidebarView.args = {
+ onSearch: action('search'),
+ thumbnailSrc: '',
+ headerTitle: 'Help Center',
+ subTitle: 'English',
+ accessibleMenuItems: [
+ {
+ icon: 'book',
+ label: 'HELP_CENTER.ALL_ARTICLES',
+ key: 'helpcenter_all',
+ count: 199,
+ toState: 'accounts/1/articles/all',
+ toolTip: 'All Articles',
+ toStateName: 'helpcenter_all',
+ },
+ {
+ icon: 'pen',
+ label: 'HELP_CENTER.MY_ARTICLES',
+ key: 'helpcenter_mine',
+ count: 112,
+ toState: 'accounts/1/articles/mine',
+ toolTip: 'My articles',
+ toStateName: 'helpcenter_mine',
+ },
+ {
+ icon: 'draft',
+ label: 'HELP_CENTER.DRAFT',
+ key: 'helpcenter_draft',
+ count: 32,
+ toState: 'accounts/1/articles/draft',
+ toolTip: 'Draft',
+ toStateName: 'helpcenter_draft',
+ },
+ {
+ icon: 'archive',
+ label: 'HELP_CENTER.ARCHIVED',
+ key: 'helpcenter_archive',
+ count: 10,
+ toState: 'accounts/1/articles/archived',
+ toolTip: 'Archived',
+ toStateName: 'helpcenter_archive',
+ },
+ ],
+ additionalSecondaryMenuItems: [
+ {
+ icon: 'folder',
+ label: 'HELP_CENTER.CATEGORY',
+ hasSubMenu: true,
+ key: 'category',
+ children: [
+ {
+ id: 1,
+ label: 'Getting started',
+ count: 12,
+ truncateLabel: true,
+ toState: 'accounts/1/articles/categories/new',
+ },
+ {
+ id: 2,
+ label: 'Channel',
+ count: 19,
+ truncateLabel: true,
+ toState: 'accounts/1/articles/categories/channel',
+ },
+ {
+ id: 3,
+ label: 'Feature',
+ count: 24,
+ truncateLabel: true,
+ toState: 'accounts/1/articles/categories/feature',
+ },
+ {
+ id: 4,
+ label: 'Advanced',
+ count: 8,
+ truncateLabel: true,
+ toState: 'accounts/1/articles/categories/advanced',
+ },
+ {
+ id: 5,
+ label: 'Mobile app',
+ count: 3,
+ truncateLabel: true,
+ toState: 'accounts/1/articles/categories/mobile-app',
+ },
+ {
+ id: 6,
+ label: 'Others',
+ count: 39,
+ truncateLabel: true,
+ toState: 'accounts/1/articles/categories/others',
+ },
+ ],
+ },
+ ],
+};
diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue
new file mode 100644
index 000000000..2f8fdd2fd
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/Sidebar.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue
new file mode 100644
index 000000000..a68ea6b63
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarHeader.vue
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue
new file mode 100644
index 000000000..8af29af17
--- /dev/null
+++ b/app/javascript/dashboard/components/helpCenter/Sidebar/SidebarSearch.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
index 812871ad7..de10dda4a 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -26,6 +26,9 @@
:class="{ 'text-truncate': shouldTruncate }"
>
{{ label }}
+
+ {{ childItemCount }}
+
{{ 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);
+ }
+}
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
index 1fcde8948..e89a1ab51 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -1,8 +1,14 @@