generate breadcrumbs in the nav groups transform and use the transfor…

…med data for SearchMeta

src/components/Navigation/CollapsibleGroup.tsx

@@ -7,7 +7,9 @@ import {
   type TransformedNavGroup,
 } from "./types";
 
-const Trigger = styled(Collapsible.Trigger)<{ nested?: boolean }>`
+const Trigger = styled(Collapsible.Trigger, {
+  shouldForwardProp: (prop) => prop !== "nested",
+})<{ nested?: boolean }>`
   all: unset;
   display: flex;
   align-items: center;

src/components/Navigation/Navigation.astro

@@ -4,26 +4,19 @@ import { Support } from "../Support";
 import { SideNav } from "./SideNav";
 import { Container } from "./styles";
 import { DropdownNav } from "./DropdownNav";
-import { transformNavGroups } from "./transform-nav-groups";
-import type { NavGroup } from "./types";
+import type { TransformedNavGroup } from "./types";
 
 interface Props {
   url: string;
-  navGroups: NavGroup[];
+  navGroups: TransformedNavGroup[];
 }
 
-const { navGroups: navItems, url } = Astro.props;
-
-const transformedNavGroups = navItems ? transformNavGroups(navItems) : [];
+const { navGroups, url } = Astro.props;
 ---
 
 <Container>
   <Search />
-  <DropdownNav
-    client:only="react"
-    groups={transformedNavGroups as any}
-    url={url}
-  />
-  <SideNav client:load sidebarGroups={transformedNavGroups} url={url} />
+  <DropdownNav client:only="react" groups={navGroups as any} url={url} />
+  <SideNav client:load sidebarGroups={navGroups} url={url} />
   <Support client:load />
 </Container>

src/components/Navigation/nav-groups.ts

@@ -0,0 +1,91 @@
+import { getCollection } from "astro:content";
+import { transformNavGroups, flattenGroups } from "./transform-nav-groups";
+
+const overview = await getCollection("overview");
+const storybook = await getCollection("storybook");
+const playwright = await getCollection("playwright");
+const cypress = await getCollection("cypress");
+const configuration = await getCollection("configuration");
+const modes = await getCollection("modes");
+const snapshot = await getCollection("snapshot");
+const snapshotOptions = await getCollection("snapshotOptions");
+const turbosnap = await getCollection("turbosnap");
+const collaborate = await getCollection("collaborate");
+const plugins = await getCollection("plugins");
+const ci = await getCollection("ci");
+const account = await getCollection("account");
+const guides = await getCollection("guides");
+const troubleshooting = await getCollection("troubleshooting");
+
+const rawNavGroups = [
+  {
+    title: "Overview",
+    items: overview,
+    defaultOpen: true,
+    timeline: true,
+  },
+  {
+    title: "Storybook",
+    items: [
+      ...storybook,
+      {
+        title: "Modes",
+        items: modes,
+      },
+      {
+        title: "TurboSnap",
+        items: turbosnap,
+      },
+    ],
+    defaultOpen: false,
+  },
+  {
+    title: "Playwright",
+    items: playwright,
+    timeline: true,
+  },
+  {
+    title: "Cypress",
+    items: cypress,
+    timeline: true,
+  },
+  {
+    title: "Guides",
+    items: guides,
+  },
+  {
+    title: "Configuration",
+    items: configuration,
+  },
+  {
+    title: "Snapshot",
+    items: snapshot,
+  },
+  {
+    title: "Snapshot options",
+    items: snapshotOptions,
+  },
+  {
+    title: "Collaborate",
+    items: collaborate,
+  },
+  {
+    title: "CI",
+    items: ci,
+  },
+  {
+    title: "Plugins",
+    items: plugins,
+  },
+  {
+    title: "Account",
+    items: account,
+  },
+  {
+    title: "Troubleshooting",
+    items: troubleshooting,
+  },
+];
+
+export const navGroups = transformNavGroups(rawNavGroups);
+export const flattenedNavItems = flattenGroups(navGroups);