Update sidebar links and labels across modules

Added 'Playground' links to the main sections of AI, Bridge, Tokens, Wallets, and updated/remodeled their placement. Changed 'REST API' references to 'HTTP API' and updated their URLs to local '/reference' paths in Bridge, Payments, and X402 sidebars. Cleaned up duplicate or misplaced Playground links from resource sections for consistency.

Author: 0xFirekeeper

apps/portal/src/app/ai/sidebar.tsx

@@ -4,14 +4,20 @@ import type { SideBar } from "@/components/Layouts/DocLayout";
 export const sidebar: SideBar = {
   links: [
     {
-      name: "AI",
+      name: "Get Started",
+      href: "/ai/chat",
+      icon: <ZapIcon />,
+    },
+    {
+      href: "https://playground.thirdweb.com",
+      name: "Playground",
+      icon: <ExternalLinkIcon />,
+    },
+    { separator: true },
+    {
+      name: "Guides",
       isCollapsible: false,
       links: [
-        {
-          name: "Get Started",
-          href: "/ai/chat",
-          icon: <ZapIcon />,
-        },
         {
           name: "Transaction Execution",
           href: "/ai/chat/execution",
@@ -61,11 +67,6 @@ export const sidebar: SideBar = {
       name: "Resources",
       isCollapsible: false,
       links: [
-        {
-          href: "https://playground.thirdweb.com/ai/chat",
-          icon: <ExternalLinkIcon />,
-          name: "Playground",
-        },
         {
           href: "/ai/faq",
           name: "FAQ",

apps/portal/src/app/bridge/sidebar.tsx

@@ -1,4 +1,4 @@
-import { ZapIcon } from "lucide-react";
+import { ExternalLinkIcon, ZapIcon } from "lucide-react";
 import type { SideBar } from "@/components/Layouts/DocLayout";
 import { EngineIcon, ReactIcon, TypeScriptIcon, UnityIcon } from "@/icons";
 import { UnrealEngineIcon } from "../../icons/sdks/UnrealEngineIcon";
@@ -12,6 +12,11 @@ export const sidebar: SideBar = {
       name: "Get Started",
       icon: <ZapIcon />,
     },
+    {
+      href: "https://playground.thirdweb.com",
+      name: "Playground",
+      icon: <ExternalLinkIcon />,
+    },
     { separator: true },
     {
       isCollapsible: false,
@@ -64,9 +69,9 @@ export const sidebar: SideBar = {
       isCollapsible: false,
       links: [
         {
-          href: `https://payments.thirdweb.com/reference`,
+          href: `/reference`,
           icon: <EngineIcon />,
-          name: "REST API",
+          name: "HTTP API",
         },
         {
           href: "/references/typescript/v5",

apps/portal/src/app/payments/sidebar.tsx

@@ -65,9 +65,9 @@ export const sidebar: SideBar = {
       isCollapsible: false,
       links: [
         {
-          href: `https://payments.thirdweb.com/reference`,
+          href: `/reference`,
           icon: <EngineIcon />,
-          name: "REST API",
+          name: "HTTP API",
         },
         {
           href: "/references/typescript/v5",

apps/portal/src/app/tokens/sidebar.tsx

@@ -1,4 +1,4 @@
-import { ZapIcon } from "lucide-react";
+import { ExternalLinkIcon, ZapIcon } from "lucide-react";
 import type { SideBar } from "@/components/Layouts/DocLayout";
 
 const slug = "/tokens";
@@ -10,6 +10,11 @@ export const sidebar: SideBar = {
       name: "Get Started",
       icon: <ZapIcon />,
     },
+    {
+      href: "https://playground.thirdweb.com",
+      name: "Playground",
+      icon: <ExternalLinkIcon />,
+    },
     { separator: true },
     {
       isCollapsible: false,

apps/portal/src/app/wallets/sidebar.tsx

@@ -12,6 +12,11 @@ export const sidebar: SideBar = {
       name: "Get Started",
       icon: <ZapIcon />,
     },
+    {
+      href: "https://playground.thirdweb.com/wallets",
+      name: "Playground",
+      icon: <ExternalLinkIcon />,
+    },
     { separator: true },
     {
       isCollapsible: false,
@@ -122,11 +127,6 @@ export const sidebar: SideBar = {
       isCollapsible: false,
       name: "Resources",
       links: [
-        {
-          href: "https://playground.com/wallets",
-          icon: <ExternalLinkIcon />,
-          name: "Playground",
-        },
         {
           href: `${walletSlug}/wallet-types`,
           name: "Wallet Types",

apps/portal/src/app/x402/sidebar.tsx

@@ -45,9 +45,9 @@ export const sidebar: SideBar = {
       isCollapsible: false,
       links: [
         {
-          href: `https://payments.thirdweb.com/reference`,
+          href: `/reference`,
           icon: <EngineIcon />,
-          name: "REST API",
+          name: "HTTP API",
         },
         {
           href: "/references/typescript/v5",
@@ -76,11 +76,6 @@ export const sidebar: SideBar = {
     {
       isCollapsible: false,
       links: [
-        {
-          href: "https://playground.com/x402",
-          icon: <ExternalLinkIcon />,
-          name: "Playground",
-        },
         {
           href: `${x402Slug}/faq`,
           name: "FAQ",