feat: Add SidebarItem, sideBarGroup and sideBar components (#6065)

* feat: Add SidebarItem, sideBarGroup and sideBar components * feat: Add styling to sideBarGroup * Update components/Common/Sidebar/index.tsx Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update types/sidebar.ts Co-authored-by: Augustin Mauroy <augustin.mauroy@outlook.fr> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/index.tsx Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/index.tsx Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/SidebarItem/index.module.css Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/SidebarItem/index.tsx Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * feat: refactored component structure for sidebar * removed console log * Update components/Common/Sidebar/SidebarGroup/index.module.css Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.module.css Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.module.css Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.tsx Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * Update components/Common/Sidebar/SidebarGroup/index.tsx Co-authored-by: canerakdas <canerakdas@gmail.com> Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> * removed unused import * feat:refactored sidebar component removed internal state * updated styling to match ui with figma design * updated styling * minor code refactoring and updated storybook to make it look like real page * fixed lint issues * updated imports * chore: address review feedback, align with figma --------- Signed-off-by: manikanta mavireddy <56877683+manikantamavireddy@users.noreply.github.com> Co-authored-by: Manikanta Mavireddy <manikantamavireddy@Manikantas-MacBook-Air.local> Co-authored-by: canerakdas <canerakdas@gmail.com> Co-authored-by: Augustin Mauroy <augustin.mauroy@outlook.fr> Co-authored-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
nodejs · Nov 15, 2023 · 1a195e4 · 1a195e4
1 parent 450de11
commit 1a195e4
Show file tree

Hide file tree

Showing 7 changed files with 312 additions and 0 deletions.
diff --git a/components/Common/Sidebar/SidebarGroup/index.module.css b/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;
+}
diff --git a/components/Common/Sidebar/SidebarGroup/index.tsx b/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;
diff --git a/components/Common/Sidebar/SidebarItem/index.module.css b/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;
+  }
+}
diff --git a/components/Common/Sidebar/SidebarItem/index.tsx b/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;
diff --git a/components/Common/Sidebar/index.module.css b/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;
+}
diff --git a/components/Common/Sidebar/index.stories.tsx b/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;
diff --git a/components/Common/Sidebar/index.tsx b/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;