docs: Simplify React Native sidebar navigation

Author: joaquim-verges

apps/portal/src/app/react-native/v5/sidebar.tsx

@@ -1,11 +1,8 @@
-import { Book, BugIcon, CodeIcon, ZapIcon } from "lucide-react";
+import { BookIcon, BugIcon, CodeIcon, ZapIcon } from "lucide-react";
 import type { SideBar } from "../../../components/Layouts/DocLayout";
 import { ReactIcon, TypeScriptIcon } from "../../../icons";
-import { fetchTypeScriptDoc } from "../../references/components/TDoc/fetchDocs/fetchTypeScriptDoc";
-import { getCustomTag } from "../../references/components/TDoc/utils/getSidebarLinkgroups";
 
 const slug = "/react-native/v5";
-const docs = await fetchTypeScriptDoc("v5");
 
 export const sidebar: SideBar = {
   name: "Connect React Native SDK",
@@ -27,253 +24,25 @@ export const sidebar: SideBar = {
       href: `${slug}/troubleshooting`,
       icon: <BugIcon />,
     },
-    { separator: true },
     {
-      name: "Core",
-      isCollapsible: false,
-      links: [
-        {
-          name: "Client",
-          href: `${slug}/createThirdwebClient`,
-        },
-        {
-          name: "ThirdwebProvider",
-          href: `${slug}/ThirdwebProvider`,
-        },
-        {
-          name: "Themes",
-          links: [
-            {
-              name: "Theme Props",
-              href: `${slug}/Theme`,
-              icon: <CodeIcon />,
-            },
-            ...(docs.functions
-              ?.filter((f) => {
-                const [tag] = getCustomTag(f) || [];
-                return tag === "@theme";
-              })
-              ?.map((f) => ({
-                name: f.name,
-                href: `${slug}/${f.name}`,
-                icon: <CodeIcon />,
-              })) || []),
-          ],
-        },
-        {
-          name: "TS reference",
-          href: "/typescript/v5",
-          icon: <TypeScriptIcon />,
-        },
-        {
-          name: "React reference",
-          href: "/react/v5",
-          icon: <ReactIcon />,
-        },
-      ],
-    },
-    { separator: true },
-    {
-      name: "Wallets",
-      isCollapsible: false,
-      links: [
-        {
-          name: "UI Components",
-          links: ["ConnectButton", "ConnectEmbed", "AutoConnect"].map(
-            (name) => ({
-              name,
-              href: `${slug}/${name}`,
-              icon: <CodeIcon />,
-            }),
-          ),
-        },
-        {
-          name: "Connection Hooks",
-          href: `${slug}/connecting-wallets/hooks`,
-          links:
-            docs.hooks
-              ?.filter((hook) => {
-                const [tag] = getCustomTag(hook) || [];
-                return tag === "@walletConnection";
-              })
-              ?.map((hook) => ({
-                name: hook.name,
-                href: `${slug}/${hook.name}`,
-                icon: <CodeIcon />,
-              })) || [],
-        },
-        {
-          name: "Wallet Hooks",
-          links:
-            docs.hooks
-              ?.filter((hook) => {
-                const [tag] = getCustomTag(hook) || [];
-                return tag === "@wallet";
-              })
-              ?.map((hook) => ({
-                name: hook.name,
-                href: `${slug}/${hook.name}`,
-                icon: <CodeIcon />,
-              })) || [],
-        },
-        {
-          name: "In-App Wallets",
-          links: [
-            {
-              name: "React API",
-              href: "/react/v5/in-app-wallet/get-started",
-              icon: <ReactIcon />,
-            },
-          ],
-        },
-        {
-          name: "Ecosystem Wallets",
-          links: [
-            {
-              name: "React API",
-              href: "/react/v5/ecosystem-wallet/get-started",
-              icon: <ReactIcon />,
-            },
-          ],
-        },
-        {
-          name: "Account Abstraction",
-          links: [
-            {
-              name: "React API",
-              href: "/react/v5/account-abstraction/get-started",
-              icon: <ReactIcon />,
-            },
-          ],
-        },
-        {
-          name: "Supported Wallets",
-          href: "/typescript/v5/supported-wallets",
-          icon: <TypeScriptIcon />,
-        },
-      ],
-    },
-    { separator: true },
-    {
-      name: "Social API",
-      isCollapsible: false,
-      links: ["useSocialProfiles"].map((name) => ({
-        name,
-        href: `${slug}/${name}`,
-        icon: <CodeIcon />,
-      })),
-    },
-    { separator: true },
-    {
-      name: "Pay",
-      isCollapsible: false,
-      links: [
-        {
-          name: "Buy with Fiat",
-          links:
-            docs.hooks
-              ?.filter((f) => {
-                const [tag] = getCustomTag(f) || [];
-                return tag === "@buyCrypto" && f.name.includes("Fiat");
-              })
-              ?.map((f) => ({
-                name: f.name,
-                href: `${slug}/${f.name}`,
-                icon: <CodeIcon />,
-              })) || [],
-        },
-        {
-          name: "Buy with Crypto",
-          links:
-            docs.hooks
-              ?.filter((f) => {
-                const [tag] = getCustomTag(f) || [];
-                return tag === "@buyCrypto" && f.name.includes("Crypto");
-              })
-              ?.map((f) => ({
-                name: f.name,
-                href: `${slug}/${f.name}`,
-                icon: <CodeIcon />,
-              })) || [],
-        },
-      ],
-    },
-    { separator: true },
-    {
-      name: "Blockchain API",
-      isCollapsible: false,
-      links: [
-        {
-          name: "UI Components",
-          links: ["TransactionButton"].map((name) => ({
-            name,
-            href: `${slug}/${name}`,
-            icon: <CodeIcon />,
-          })),
-        },
-        {
-          name: "Reading State",
-          href: `${slug}/reading-state`,
-          links:
-            docs.hooks
-              ?.filter((hook) => {
-                const [tag] = getCustomTag(hook) || [];
-                return tag === "@contract";
-              })
-              ?.map((hook) => ({
-                name: hook.name,
-                href: `${slug}/${hook.name}`,
-                icon: <CodeIcon />,
-              })) || [],
-        },
-        {
-          name: "Transactions",
-          href: `${slug}/transactions`,
-          links:
-            docs.hooks
-              ?.filter((hook) => {
-                const [tag] = getCustomTag(hook) || [];
-                return tag === "@transaction";
-              })
-              ?.map((hook) => ({
-                name: hook.name,
-                href: `${slug}/${hook.name}`,
-                icon: <CodeIcon />,
-              })) || [],
-        },
-        {
-          name: "Extensions",
-          links: [
-            {
-              name: "Using Extensions",
-              href: "/react/v5/extensions",
-              icon: <Book />,
-            },
-            {
-              name: "Available Extensions",
-              href: "/typescript/v5/extensions/built-in",
-              icon: <TypeScriptIcon />,
-            },
-          ],
-        },
-        {
-          name: "Core API",
-          href: "/typescript/typescript/v5/chain",
-          icon: <TypeScriptIcon />,
-        },
-      ],
+      name: "Differences from React",
+      href: `${slug}/differences`,
+      icon: <BookIcon />,
     },
     {
-      separator: true,
+      name: "TypeScript docs",
+      href: "/typescript/v5",
+      icon: <TypeScriptIcon />,
     },
     {
-      name: "Differences from React",
-      href: `${slug}/differences`,
+      name: "React docs",
+      href: "/react/v5",
+      icon: <ReactIcon />,
     },
     {
-      name: "Full Reference",
-      href: "/references/typescript/v5/hooks",
-      isCollapsible: false,
+      name: "API Reference",
+      href: "/references/typescript/v5",
+      icon: <CodeIcon />,
     },
   ],
 };