update sidebar layout to allow nested groups and extract transforms into separate utilities

Author: winkerVSbecks

src/components/Navigation/Navigation.astro

@@ -5,6 +5,7 @@ import { Support } from "../Support";
 import { SideNav } from "./SideNav";
 import { Container } from "./styles";
 import { DropdownNav } from "./DropdownNav";
+import { transformNavGroups } from "./transform-nav-groups";
 
 interface Props {
   url?: string;
@@ -34,33 +35,7 @@ interface Props {
 
 const { navItems, url } = Astro.props;
 
-const navGroups = navItems
-  ? navItems.map((group) => ({
-      ...group,
-      items: group.items
-        .map((item) => ({
-          ...item,
-          label: item.data?.sidebar?.label || item.data.title,
-          slug: item.data?.isHome ? "" : (item.slug as any),
-          data: {
-            ...item.data,
-            sidebar: {
-              label: item.data?.sidebar?.label || item.data.title,
-              order: item.data?.sidebar?.order || 999,
-              hide: item.data?.sidebar?.hide || false,
-            },
-          },
-        }))
-        .filter((item) => !item.data.sidebar.hide)
-        .sort((p1, p2) =>
-          p1.data.sidebar.order > p2.data.sidebar.order
-            ? 1
-            : p1.data.sidebar.order < p2.data.sidebar.order
-              ? -1
-              : 0,
-        ),
-    }))
-  : [];
+const navGroups = navItems ? transformNavGroups(navItems) : [];
 ---
 
 <Container>

src/components/Navigation/SideNav.stories.tsx

@@ -141,6 +141,82 @@ const mockSidebarItems: SidebarItem[] = [
   },
 ];
 
+const mockSidebarItemsWithNestedItems: SidebarItem = {
+  ...mockSidebarItems[1],
+  items: mockSidebarItems[1].items.concat([
+    {
+      title: "Modes",
+      items: [
+        {
+          id: "modes.mdx",
+          slug: "modes",
+          collection: "modes",
+          data: {
+            title: "Story Modes",
+            sidebar: {
+              label: "Story Modes",
+              order: 1,
+              hide: false,
+            },
+          },
+        },
+        {
+          id: "viewports.mdx",
+          slug: "viewports",
+          collection: "modes",
+          data: {
+            title: "Viewports",
+            sidebar: {
+              label: "Viewports",
+              order: 2,
+              hide: false,
+            },
+          },
+        },
+        {
+          id: "themes.md",
+          slug: "themes",
+          collection: "modes",
+          data: {
+            title: "Themes",
+            sidebar: {
+              label: "Themes",
+              order: 3,
+              hide: false,
+            },
+          },
+        },
+        {
+          id: "custom-decorators.md",
+          slug: "custom-decorators",
+          collection: "modes",
+          data: {
+            title: "Custom decorators and globals",
+            sidebar: {
+              label: "Custom decorators",
+              order: 4,
+              hide: false,
+            },
+          },
+        },
+        {
+          id: "legacy-viewports.md",
+          slug: "legacy-viewports",
+          collection: "modes",
+          data: {
+            title: "Viewports (legacy)",
+            sidebar: {
+              label: "Viewports (legacy)",
+              order: 5,
+              hide: false,
+            },
+          },
+        },
+      ],
+    },
+  ]),
+};
+
 export const Default: Story = {
   args: {
     sidebarItems: mockSidebarItems,
@@ -156,6 +232,24 @@ export const DefaultOpen: Story = {
   },
 };
 
+export const Nested: Story = {
+  args: {
+    sidebarItems: [
+      { ...mockSidebarItems[0], defaultOpen: true },
+      mockSidebarItemsWithNestedItems,
+    ],
+  },
+};
+
+export const NestedOpen: Story = {
+  args: {
+    sidebarItems: [
+      { ...mockSidebarItems[0], defaultOpen: true },
+      mockSidebarItemsWithNestedItems,
+    ],
+  },
+};
+
 export const WithActiveUrl: Story = {
   args: {
     url: "/docs/test",

src/components/Navigation/SideNav.tsx

@@ -32,17 +32,15 @@ const IconWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 14px;
-  height: 14px;
+  width: 10px;
+  height: 10px;
   transition: all 0.2s ease-in-out;
-  margin-top: -2px;
 `;
 
 const ContentWrapper = styled.div<{ isTimeline: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 4px;
-  margin-left: 3px;
   position: relative;
 
   &:before {
@@ -80,6 +78,11 @@ const ContentItem = styled.div<{ isActive: boolean; isTimeline?: boolean }>`
   }
 `;
 
+const NestedContent = styled(Collapsible.Content)`
+  padding-left: 20px;
+  margin-top: 4px;
+`;
+
 const Bullet = styled.div<{ isActive: boolean }>`
   position: relative;
   z-index: 1;
@@ -93,6 +96,8 @@ const Bullet = styled.div<{ isActive: boolean }>`
 
 const SidebarContainer = styled.div`
   display: none;
+  width: 100%;
+  padding: 0 ${spacing[8]} 0 ${spacing[2]};
 
   ${minMd} {
     display: flex;
@@ -128,9 +133,14 @@ type Item = (
   };
 };
 
-export interface SidebarItem {
+interface NestedItem {
   title: string;
   items: Item[];
+}
+
+export interface SidebarItem {
+  title: string;
+  items: (Item | NestedItem)[];
   defaultOpen?: boolean;
   timeline?: boolean;
 }
@@ -145,51 +155,93 @@ const withBase = (url: string) =>
 
 const homeUrl = withBase("");
 
+function isNestedItem(item: Item | NestedItem): item is NestedItem {
+  return (item as NestedItem).items !== undefined;
+}
+
+const CollapsibleItem = ({
+  item,
+  url,
+  timeline,
+  isHome,
+}: {
+  item: Item;
+  url?: string;
+  timeline?: boolean;
+  isHome?: boolean;
+}) => {
+  const isActive =
+    isHome && item.data.isHome ? true : withBase(item.slug) === url;
+
+  return (
+    <Collapsible.Content asChild>
+      <Line href={withBase(item.slug)}>
+        {!!timeline && <Bullet isActive={isActive} />}
+        <ContentItem isActive={isActive} isTimeline={!!timeline}>
+          {item.data.sidebar.label}
+        </ContentItem>
+      </Line>
+    </Collapsible.Content>
+  );
+};
+
+const CollapsibleGroup = ({
+  group,
+  url,
+  isHome,
+}: {
+  group: SidebarItem;
+  url?: string;
+  isHome?: boolean;
+}) => {
+  const isSomeActive = group.items.some((item) => {
+    if (isNestedItem(item)) {
+      return item.items.some((nestedItem) => withBase(nestedItem.slug) === url);
+    } else {
+      return withBase(item.slug) === url;
+    }
+  });
+
+  return (
+    <Collapsible.Root defaultOpen={group.defaultOpen || isSomeActive}>
+      <Trigger>
+        {group.title}
+        <IconWrapper className="icon-wrapper">
+          <Icon size={10} name="arrowright" />
+        </IconWrapper>
+      </Trigger>
+      <ContentWrapper isTimeline={!!group.timeline}>
+        {group.items.map((item, j) => {
+          if (isNestedItem(item)) {
+            return (
+              <NestedContent>
+                <CollapsibleGroup group={item} url={url} isHome={isHome} />
+              </NestedContent>
+            );
+          }
+          return (
+            <CollapsibleItem
+              item={item}
+              url={url}
+              timeline={group.timeline}
+              isHome={isHome}
+            />
+          );
+        })}
+      </ContentWrapper>
+    </Collapsible.Root>
+  );
+};
+
 export const SideNav = ({ url, sidebarItems }: SideNavProps) => {
   const isHome = url === homeUrl;
 
   return (
     <SidebarContainer>
       {sidebarItems &&
         sidebarItems.map((group, i) => {
-          const isSomeActive = group.items.some(
-            (item) => withBase(item.slug) === url,
-          );
-
           return (
-            <Collapsible.Root
-              defaultOpen={group.defaultOpen || isSomeActive}
-              key={i}
-            >
-              <Trigger>
-                <IconWrapper className="icon-wrapper">
-                  <Icon name="arrowright" />
-                </IconWrapper>
-                {group.title}
-              </Trigger>
-              <ContentWrapper isTimeline={!!group.timeline}>
-                {group.items.map((item, j) => {
-                  const isActive =
-                    isHome && item.data.isHome
-                      ? true
-                      : withBase(item.slug) === url;
-
-                  return (
-                    <Collapsible.Content key={j} asChild>
-                      <Line href={withBase(item.slug)}>
-                        {!!group.timeline && <Bullet isActive={isActive} />}
-                        <ContentItem
-                          isActive={isActive}
-                          isTimeline={!!group.timeline}
-                        >
-                          {item.data.sidebar.label}
-                        </ContentItem>
-                      </Line>
-                    </Collapsible.Content>
-                  );
-                })}
-              </ContentWrapper>
-            </Collapsible.Root>
+            <CollapsibleGroup group={group} url={url} isHome={isHome} key={i} />
           );
         })}
     </SidebarContainer>