Merge pull request #3382 from ava-labs/playground-menu-changes

playground menu changes for convenience

Author: navillanueva

app/(home)/stats/playground/my-dashboards/page.tsx

@@ -8,6 +8,7 @@ import { useLoginModalTrigger } from "@/hooks/useLoginModal";
 import { LoginModal } from "@/components/login/LoginModal";
 import { Card } from "@/components/ui/card";
 import { toast } from "@/lib/toast";
+import { StatsBubbleNav } from "@/components/stats/stats-bubble.config";
 
 export default function MyDashboardsPage() {
   const { data: session, status } = useSession();
@@ -357,6 +358,9 @@ export default function MyDashboardsPage() {
             </div>
           </Card>
         )}
+
+        {/* Bubble Navigation */}
+        <StatsBubbleNav />
       </div>
     </div>
   );

app/(home)/stats/playground/page.tsx

@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import { useLoginModalTrigger } from "@/hooks/useLoginModal";
 import { LoginModal } from "@/components/login/LoginModal";
 import { toast } from "@/lib/toast";
+import { StatsBubbleNav } from "@/components/stats/stats-bubble.config";
 
 interface ChartConfig {
   id: string;
@@ -1361,6 +1362,9 @@ function PlaygroundContent() {
           </div>
         )}
       </div>
+
+      {/* Bubble Navigation */}
+      <StatsBubbleNav />
     </div>
   );
 }

app/layout.config.tsx

@@ -111,33 +111,59 @@ export const stats: LinkItemType = {
   text: "Stats",
   url: "/stats/overview",
   items: [
+    {
+      menu: {
+        banner: (
+          <div className='-mx-3 -mt-3'>
+            <Image
+              src="/builderhub-playground.png"
+              alt='Playground Preview'
+              width={500}
+              height={140}
+              className='rounded-t-lg object-cover'
+              style={{
+                maskImage: 'linear-gradient(to bottom,white 60%,transparent)',
+              }}
+            />
+          </div>
+        ),
+        className: 'md:row-span-2 lg:col-span-1',
+      },
+      icon: <DraftingCompass />,
+      text: "Playground",
+      url: "/stats/playground",
+      description:
+      "Create and customize multiple charts with real-time chain metrics.",
+    },
     {
       icon: <Logs />,
       text: "Avalanche L1s",
       url: "/stats/overview",
       description:
       "View the latest metrics for all Avalanche L1s in the network.",
+      menu: {
+        className: 'lg:col-start-2 lg:row-start-1',
+      },
     },
     {
       icon: <Network />,
       text: "C-Chain",
       url: "/stats/primary-network/c-chain",
       description:
       "View the latest metrics for the Avalanche C-Chain.",
+      menu: {
+        className: 'lg:col-start-2 lg:row-start-2',
+      },
     },
     {
       icon: <Hexagon />,
       text: "Primary Network Validators",
       url: "/stats/validators",
       description:
       "View the latest metrics for the Avalanche Primary Network validators.",
-    },
-    {
-      icon: <DraftingCompass />,
-      text: "Playground",
-      url: "/stats/playground",
-      description:
-      "Create and customize multiple charts with real-time chain metrics.",
+      menu: {
+        className: 'lg:col-start-3 lg:row-start-1',
+      },
     },
   ],
 };

components/stats/stats-bubble.config.tsx

@@ -7,6 +7,7 @@ export const statsBubbleConfig: BubbleNavigationConfig = {
     items: [
         { id: "avalanche-l1s", label: "Avalanche L1s", href: "/stats/overview" },
         { id: "c-chain", label: "C-Chain", href: "/stats/primary-network/c-chain" },
+        { id: "playground", label: "Playground", href: "/stats/playground" },
         { id: "validators", label: "Validators", href: "/stats/validators" },
     ],
     activeColor: "bg-blue-600",
@@ -23,6 +24,8 @@ export function StatsBubbleNav() {
             return currentItem.id;
         } else if (pathname.startsWith("/stats/l1/")) {
             return "";
+        } else if (pathname.startsWith("/stats/playground")) {
+            return "playground";
         }
         return "overview";
     };