Add sidebar

apps/web/package.json

@@ -13,6 +13,8 @@
     "@3loop/transaction-interpreter": "workspace:*",
     "@jitl/quickjs-singlefile-browser-release-sync": "^0.29.2",
     "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",

apps/web/src/app/data.ts

@@ -179,12 +179,17 @@ export const DEFAULT_CHAIN_ID = 1
 
 const generateNavItems = (transactions: any, path: string) => {
   return transactions.map((tx: any) => ({
-    href: `/${path}/${tx.chainID}/${tx.hash}`,
+    url: `/${path}/${tx.chainID}/${tx.hash}`,
     title: `${tx.name}`,
   }))
 }
 
-export const geSidebarNavItems = (path: string) =>
-  Object.fromEntries(Object.entries(EXAMPLE_TXS).map(([key, value]) => [key, generateNavItems(value, path)]))
+export const geSidebarNavItems = (path: string) => {
+  return Object.entries(EXAMPLE_TXS).map(([key, value]) => ({
+    title: key,
+    url: `#`,
+    items: generateNavItems(value, path) as { url: string; title: string }[],
+  }))
+}
 
 export const INTERPRETER_REPO = 'https://github.com/3loop/loop-decoder/tree/main/packages/transaction-interpreter'

apps/web/src/app/decode/[chainID]/[hash]/loading.tsx

@@ -1,9 +1,8 @@
 import { Label } from '@/components/ui/label'
-import { SidebarNav } from '@/components/ui/sidebar-nav'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { NetworkSelect } from '@/components/ui/network-select'
-import { geSidebarNavItems } from '@/app/data'
+import { ExampleTransactions } from '@/components/ui/examples'
 
 export default function Loading() {
   return (
@@ -32,16 +31,7 @@ export default function Loading() {
       </div>
 
       <div className="md:order-2">
-        <div className="space-y-4">
-          <p className="text-lg font-semibold tracking-tight">Example Transactions</p>
-
-          {Object.entries(geSidebarNavItems('decode')).map(([heading, items]) => (
-            <div key={heading}>
-              <p className="text-sm text-muted-foreground">{heading}</p>
-              <SidebarNav items={items} />
-            </div>
-          ))}
-        </div>
+        <ExampleTransactions path="decode" />
       </div>
     </div>
   )

apps/web/src/app/globals.css

@@ -1,76 +1,94 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
+
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
- 
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
+
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
+
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
- 
+
     --radius: 0.5rem;
+
+    --sidebar-primary: 240 5.9% 10%;
+
+    --sidebar-primary-foreground: 0 0% 98%;
+
+    --sidebar-accent: 240 4.8% 95.9%;
+
+    --sidebar-accent-foreground: 240 5.9% 10%;
+
+    --sidebar-border: 220 13% 91%;
+
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
- 
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
- 
+
     --card: 222.2 84% 4.9%;
     --card-foreground: 210 40% 98%;
- 
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
- 
+
     --primary: 210 40% 98%;
     --primary-foreground: 222.2 47.4% 11.2%;
- 
+
     --secondary: 217.2 32.6% 17.5%;
     --secondary-foreground: 210 40% 98%;
- 
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
- 
+
     --accent: 217.2 32.6% 17.5%;
     --accent-foreground: 210 40% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
- 
+
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

apps/web/src/app/interpret/[chainID]/[hash]/loading.tsx

@@ -1,10 +1,9 @@
 import { Label } from '@/components/ui/label'
-import { SidebarNav } from '@/components/ui/sidebar-nav'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
 import { PlayIcon } from 'lucide-react'
 import { NetworkSelect } from '@/components/ui/network-select'
-import { geSidebarNavItems } from '@/app/data'
+import { ExampleTransactions } from '@/components/ui/examples'
 
 export default function Loading() {
   return (
@@ -49,17 +48,8 @@ export default function Loading() {
         </div>
       </div>
 
-      <div className=" md:order-2">
-        <div className="space-y-4">
-          <p className="text-lg font-semibold tracking-tight">Example Transactions</p>
-
-          {Object.entries(geSidebarNavItems('interpret')).map(([heading, items]) => (
-            <div key={heading}>
-              <p className="text-sm text-muted-foreground">{heading}</p>
-              <SidebarNav items={items} />
-            </div>
-          ))}
-        </div>
+      <div className="md:order-2">
+        <ExampleTransactions path="interpret" />
       </div>
     </div>
   )

apps/web/src/app/layout.tsx

@@ -1,6 +1,4 @@
 import { Separator } from '@/components/ui/separator'
-import { Terminal } from 'lucide-react'
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
@@ -123,7 +121,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       <body className={inter.className}>
         <div className="flex h-screen flex-col">
           <NavigationBar />
-
           <div className="w-full mx-auto px-3 lg:px-4 max-w-screen-xl h-full py-4">
             <NpmAlert />
             {children}

apps/web/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {

apps/web/src/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

apps/web/src/components/ui/examples.tsx

@@ -1,17 +1,55 @@
 import { geSidebarNavItems } from '@/app/data'
-import { SidebarNav } from '@/components/ui/sidebar-nav'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarMenuSub,
+  SidebarMenuSubItem,
+  SidebarProvider,
+} from '@/components/ui/sidebar'
+
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
 
 export function ExampleTransactions({ path }: { path: string }) {
   return (
-    <div className="space-y-4">
-      <p className="text-lg font-semibold tracking-tight">Example Transactions</p>
+    <SidebarProvider className="items-start">
+      <Sidebar collapsible="none" className="hidden md:flex">
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupLabel>Example Transactions</SidebarGroupLabel>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {geSidebarNavItems(path).map(({ title, items }, index) => (
+                  <Collapsible key={title} title={title} defaultOpen={true} className="group/collapsible">
+                    <SidebarMenuItem key={title}>
+                      <CollapsibleTrigger>{title}</CollapsibleTrigger>
 
-      {Object.entries(geSidebarNavItems(path)).map(([heading, items]) => (
-        <div key={heading}>
-          <p className="text-sm text-muted-foreground">{heading}</p>
-          <SidebarNav items={items} />
-        </div>
-      ))}
-    </div>
+                      {items
+                        ? items.map((item) => (
+                            <CollapsibleContent key={item.title}>
+                              <SidebarMenuSub key={item.title}>
+                                <SidebarMenuSubItem key={item.title}>
+                                  <SidebarMenuButton asChild>
+                                    <a href={item.url}>{item.title}</a>
+                                  </SidebarMenuButton>
+                                </SidebarMenuSubItem>
+                              </SidebarMenuSub>
+                            </CollapsibleContent>
+                          ))
+                        : null}
+                    </SidebarMenuItem>
+                  </Collapsible>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+    </SidebarProvider>
   )
 }

apps/web/src/components/ui/input.tsx

@@ -2,21 +2,21 @@ import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
 Input.displayName = 'Input'
 
 export { Input }