feat: Add SidebarItem, sideBarGroup and sideBar components

components/Common/Sidebar/SidebarGroup/index.module.css

@@ -0,0 +1,23 @@
+.group {
+  @apply flex
+    w-full
+    flex-col
+    gap-2;
+}
+
+.groupName {
+  @apply px-2
+    text-xs
+    font-semibold
+    text-neutral-800
+    dark:text-neutral-200;
+}
+
+.itemList {
+  @apply m-0
+    flex
+    flex-col
+    items-start
+    gap-0.5
+    p-0;
+}

components/Common/Sidebar/SidebarGroup/index.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps, FC } from 'react';
+
+import SidebarItem from '@/components/Common/Sidebar/SidebarItem';
+
+import styles from './index.module.css';
+
+type SidebarGroupProps = {
+  groupName: string;
+  items: ComponentProps<typeof SidebarItem>[];
+  activeItem?: ComponentProps<typeof SidebarItem>;
+};
+
+const SidebarGroup: FC<SidebarGroupProps> = ({
+  groupName,
+  items,
+  activeItem,
+}) => (
+  <section className={styles.group}>
+    <label className={styles.groupName}>{groupName}</label>
+    <ul className={styles.itemList}>
+      {items.map(({ title, url }) => (
+        <SidebarItem
+          key={title}
+          title={title}
+          url={url}
+          isActive={
+            activeItem?.title === title && activeItem.url === activeItem.url
+          }
+        />
+      ))}
+    </ul>
+  </section>
+);
+
+export default SidebarGroup;

components/Common/Sidebar/SidebarItem/index.module.css

@@ -0,0 +1,25 @@
+.sideBarItem {
+  @apply flex
+    w-full
+    list-none;
+
+  a {
+    @apply w-full
+      p-2
+      text-sm
+      font-regular
+      text-neutral-800
+      dark:text-neutral-200;
+  }
+}
+
+.active {
+  @apply rounded
+    bg-green-600;
+
+  a,
+  a:hover {
+    @apply text-white
+    dark:text-white;
+  }
+}

components/Common/Sidebar/SidebarItem/index.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import type { FC } from 'react';
+
+import Link from '@/components/Link';
+
+import styles from './index.module.css';
+
+type SidebarItemProps = {
+  title: string;
+  url: string;
+  isActive?: boolean;
+};
+
+const SidebarItem: FC<SidebarItemProps> = ({
+  url,
+  title,
+  isActive = false,
+}) => (
+  <li
+    className={classNames(styles.sideBarItem, {
+      [styles.active]: isActive,
+    })}
+  >
+    <Link href={url}>{title}</Link>
+  </li>
+);
+
+export default SidebarItem;

components/Common/Sidebar/index.module.css

@@ -0,0 +1,15 @@
+.sideBar {
+  @apply flex
+    flex-col
+    items-start
+    gap-8
+    overflow-auto
+    border-r
+    border-r-neutral-200
+    bg-white
+    px-4
+    py-6
+    dark:border-r-neutral-900
+    dark:bg-neutral-950
+    md:max-w-xs;
+}

components/Common/Sidebar/index.stories.tsx

@@ -0,0 +1,160 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Sidebar from '@/components/Common/Sidebar';
+
+type Story = StoryObj<typeof Sidebar>;
+type Meta = MetaObj<typeof Sidebar>;
+
+export const Default: Story = {
+  args: {
+    groups: [
+      {
+        groupName: 'About Node.js',
+        items: [
+          {
+            url: '/item1',
+            title: 'About Node.js',
+          },
+          {
+            url: '/item2',
+            title: 'Project Governance',
+          },
+          {
+            url: '/item3',
+            title: 'Releases',
+          },
+          {
+            url: '/item4',
+            title: 'Branding',
+          },
+          {
+            url: '/item5',
+            title: 'Privacy Policy',
+          },
+          {
+            url: '/item6',
+            title: 'Security Reporting',
+          },
+        ],
+      },
+      {
+        groupName: 'Get Involved',
+        items: [
+          {
+            url: '/item7',
+            title: 'Get Involved',
+          },
+          {
+            url: '/item8',
+            title: 'Collab Summit',
+          },
+          {
+            url: '/item9',
+            title: 'Contribute',
+          },
+          {
+            url: '/item10',
+            title: 'Code of Conduct',
+          },
+        ],
+      },
+      {
+        groupName: 'Download',
+        items: [
+          {
+            url: '/item11',
+            title: 'Download',
+          },
+          {
+            url: '/item12',
+            title: 'Package Manager',
+          },
+          {
+            url: '/item13',
+            title: 'Previous Releases',
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const ActiveItem: Story = {
+  args: {
+    groups: [
+      {
+        groupName: 'About Node.js',
+        items: [
+          {
+            url: '/item1',
+            title: 'About Node.js',
+          },
+          {
+            url: '/item2',
+            title: 'Project Governance',
+          },
+          {
+            url: '/item3',
+            title: 'Releases',
+          },
+          {
+            url: '/item4',
+            title: 'Branding',
+          },
+          {
+            url: '/item5',
+            title: 'Privacy Policy',
+          },
+          {
+            url: '/item6',
+            title: 'Security Reporting',
+          },
+        ],
+      },
+      {
+        groupName: 'Get Involved',
+        items: [
+          {
+            url: '/item7',
+            title: 'Get Involved',
+          },
+          {
+            url: '/item8',
+            title: 'Collab Summit',
+          },
+          {
+            url: '/item9',
+            title: 'Contribute',
+          },
+          {
+            url: '/item10',
+            title: 'Code of Conduct',
+          },
+        ],
+      },
+      {
+        groupName: 'Download',
+        items: [
+          {
+            url: '/item11',
+            title: 'Download',
+          },
+          {
+            url: '/item12',
+            title: 'Package Manager',
+          },
+          {
+            url: '/item13',
+            title: 'Previous Releases',
+          },
+        ],
+      },
+    ],
+    activeItem: {
+      url: '/item1',
+      title: 'About Node.js',
+    },
+  },
+};
+
+export default { component: Sidebar } as Meta;

components/Common/Sidebar/index.tsx

@@ -0,0 +1,26 @@
+import type { ComponentProps, FC } from 'react';
+
+import SidebarGroup from '@/components/Common/Sidebar/SidebarGroup';
+import type SidebarItem from '@/components/Common/Sidebar/SidebarItem';
+
+import styles from './index.module.css';
+
+type SidebarProps = {
+  groups: ComponentProps<typeof SidebarGroup>[];
+  activeItem?: ComponentProps<typeof SidebarItem>;
+};
+
+const SideBar: FC<SidebarProps> = ({ groups, activeItem }) => (
+  <aside className={styles.sideBar}>
+    {groups.map(({ groupName, items }) => (
+      <SidebarGroup
+        key={groupName}
+        groupName={groupName}
+        items={items}
+        activeItem={activeItem}
+      />
+    ))}
+  </aside>
+);
+
+export default SideBar;