feat(client): add nested sections support with auto-expansion in sidebar (#8806)

* feat(client): add nested sections support with auto-expansion in sidebar

* fix: resolve sidebar key and DOM nesting issues

* fix: update stories for nested sidebar structure

* fix: expand sidebar group when parent route is active

* fix: restrict subGroup open style to direct summary children

---------

Co-authored-by: Venkat <venkat@Venkats-MacBook-Pro.local>

Author: Venkat-Entropik

apps/site/components/withSidebar.tsx

@@ -10,7 +10,7 @@ import useScrollToElement from '#site/hooks/useScrollToElement';
 import useSiteNavigation from '#site/hooks/useSiteNavigation';
 import { useRouter, usePathname } from '#site/navigation.mjs';
 
-import type { NavigationKeys } from '#site/types';
+import type { FormattedMessage, NavigationKeys } from '#site/types';
 import type { RichTranslationValues } from 'next-intl';
 import type { FC } from 'react';
 
@@ -19,6 +19,27 @@ type WithSidebarProps = {
   context?: Record<string, RichTranslationValues>;
 };
 
+type MappedItem = {
+  label: FormattedMessage;
+  link: string;
+  target?: string;
+  items?: Array<[string, MappedItem]>;
+};
+
+type SidebarMappedEntry = {
+  label: FormattedMessage;
+  link: string;
+  target?: string;
+  items?: Array<SidebarMappedEntry>;
+};
+
+const mapItem = ([, item]: [string, MappedItem]): SidebarMappedEntry => ({
+  label: item.label,
+  link: item.link,
+  target: item.target,
+  items: item.items ? item.items.map(mapItem) : [],
+});
+
 const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
   const { getSideNavigation } = useSiteNavigation();
   const pathname = usePathname()!;
@@ -35,9 +56,9 @@ const WithSidebar: FC<WithSidebarProps> = ({ navKeys, context, ...props }) => {
     // If there's only a single navigation key, use its sub-items
     // as our navigation.
     (navKeys.length === 1 ? sideNavigation[0][1].items : sideNavigation).map(
-      ([, { label, items }]) => ({
+      ([, { label, items }]: [string, MappedItem]) => ({
         groupName: label,
-        items: items.map(([, item]) => item),
+        items: items ? items.map(mapItem) : [],
       })
     );
 

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.module.css

@@ -21,4 +21,51 @@
       text-neutral-800
       dark:text-neutral-600;
   }
+
+  .subGroup {
+    @apply flex
+      w-full
+      flex-col
+      gap-1;
+  }
+
+  .summary {
+    @apply flex
+      cursor-pointer
+      items-center
+      justify-between
+      rounded-md
+      px-2
+      py-1
+      text-sm
+      font-semibold
+      text-neutral-800
+      select-none
+      hover:bg-neutral-100
+      dark:text-neutral-200
+      hover:dark:bg-neutral-900;
+
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .subGroup[open] > .summary {
+    @apply text-green-600
+      dark:text-green-400;
+  }
+
+  .subItemList {
+    @apply mt-1
+      ml-2
+      flex
+      flex-col
+      gap-1
+      border-l
+      border-neutral-200
+      pl-2
+      dark:border-neutral-800;
+  }
 }

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.stories.tsx

@@ -33,4 +33,27 @@ export const EmptyGroup: Story = {
   },
 };
 
+export const NestedGroup: Story = {
+  args: {
+    groupName: 'Nested Group',
+    pathname: '/nested/folder-b/leaf-2',
+    items: [
+      { label: 'Flat Item', link: '/nested/flat' },
+      {
+        label: 'Folder A',
+        link: '/nested/folder-a',
+        items: [{ label: 'Leaf A.1', link: '/nested/folder-a/leaf-1' }],
+      },
+      {
+        label: 'Folder B',
+        link: '/nested/folder-b',
+        items: [
+          { label: 'Leaf B.1', link: '/nested/folder-b/leaf-1' },
+          { label: 'Leaf B.2 (Active)', link: '/nested/folder-b/leaf-2' },
+        ],
+      },
+    ],
+  },
+};
+
 export default { component: SidebarGroup } as Meta;

packages/ui-components/src/Containers/Sidebar/SidebarGroup/index.tsx

@@ -7,27 +7,73 @@ import type { ComponentProps, FC } from 'react';
 
 import styles from './index.module.css';
 
+type SidebarItemType = Omit<
+  ComponentProps<typeof SidebarItem>,
+  'as' | 'pathname'
+> & {
+  items?: Array<SidebarItemType>;
+};
+
 type SidebarGroupProps = {
   groupName: FormattedMessage;
-  items: Array<Omit<ComponentProps<typeof SidebarItem>, 'as' | 'pathname'>>;
+  items: Array<SidebarItemType>;
   as?: LinkLike;
   pathname?: string;
-  className: string;
+  className?: string;
+};
+
+const hasActivePath = (
+  items: Array<SidebarItemType>,
+  pathname?: string
+): boolean => {
+  return items.some(
+    item =>
+      item.link === pathname ||
+      (item.items && hasActivePath(item.items, pathname))
+  );
+};
+
+const renderItems = (
+  items: Array<SidebarItemType>,
+  props: { as?: LinkLike },
+  pathname?: string
+) => {
+  return items.map(({ label, link, items: subItems }) => {
+    if (subItems && subItems.length > 0) {
+      const isOpen = link === pathname || hasActivePath(subItems, pathname);
+      return (
+        <li key={link}>
+          <details className={styles.subGroup} open={isOpen}>
+            <summary className={styles.summary}>{label}</summary>
+            <ul className={styles.subItemList}>
+              {renderItems(subItems, props, pathname)}
+            </ul>
+          </details>
+        </li>
+      );
+    }
+    return (
+      <SidebarItem
+        key={link}
+        label={label}
+        link={link}
+        pathname={pathname}
+        {...props}
+      />
+    );
+  });
 };
 
 const SidebarGroup: FC<SidebarGroupProps> = ({
   groupName,
   items,
   className,
+  pathname,
   ...props
 }) => (
   <section className={classNames(styles.group, className)}>
     <label className={styles.groupName}>{groupName}</label>
-    <ul className={styles.itemList}>
-      {items.map(({ label, link }) => (
-        <SidebarItem key={link} label={label} link={link} {...props} />
-      ))}
-    </ul>
+    <ul className={styles.itemList}>{renderItems(items, props, pathname)}</ul>
   </section>
 );
 

packages/ui-components/src/Containers/Sidebar/index.tsx

@@ -1,11 +1,25 @@
 import WithNoScriptSelect from '#ui/Common/Select/NoScriptSelect';
 import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
 
-import type { LinkLike } from '#ui/types';
+import type { FormattedMessage, LinkLike } from '#ui/types';
 import type { ComponentProps, FC, PropsWithChildren, RefObject } from 'react';
 
 import styles from './index.module.css';
 
+type SidebarItemType = {
+  label: FormattedMessage;
+  link: string;
+  items?: Array<SidebarItemType>;
+};
+
+const flattenItems = (
+  items: Array<SidebarItemType>
+): Array<SidebarItemType> => {
+  return items.flatMap((item: SidebarItemType) =>
+    item.items && item.items.length ? flattenItems(item.items) : [item]
+  );
+};
+
 type SidebarProps = {
   groups: Array<
     Pick<ComponentProps<typeof SidebarGroup>, 'items' | 'groupName'>
@@ -30,7 +44,9 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
 }) => {
   const selectItems = groups.map(({ items, groupName }) => ({
     label: groupName,
-    items: items.map(({ label, link }) => ({ value: link, label })),
+    items: flattenItems(items as Array<SidebarItemType>).map(
+      ({ label, link }) => ({ value: link, label })
+    ),
   }));
 
   const currentItem = selectItems