[pull] main from nodejs:main

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;

components/Downloads/DownloadReleasesTable.tsx

@@ -37,7 +37,7 @@ const DownloadReleasesTable: FC = () => {
  <td data-label="NODE_MODULE_VERSION">{release.modules}</td>
  <td className="download-table-last">
  <a
- href={`https://nodejs.org/download/release/${release.versionWithPrefix}`}
+ href={`https://nodejs.org/download/release/${release.versionWithPrefix}/`}
  >
  {t('components.downloadReleasesTable.releases')}
  </a>