Feat: Add AgentSidebar #3221 (#5296)

### What problem does this PR solve?

Feat: Add AgentSidebar #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/agent/agent-sidebar.tsx

@@ -0,0 +1,92 @@
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import {
+  Calendar,
+  ChevronDown,
+  Home,
+  Inbox,
+  Search,
+  Settings,
+} from 'lucide-react';
+
+// Menu items.
+const items = [
+  {
+    title: 'Home',
+    url: '#',
+    icon: Home,
+  },
+  {
+    title: 'Inbox',
+    url: '#',
+    icon: Inbox,
+  },
+  {
+    title: 'Calendar',
+    url: '#',
+    icon: Calendar,
+  },
+  {
+    title: 'Search',
+    url: '#',
+    icon: Search,
+  },
+  {
+    title: 'Settings',
+    url: '#',
+    icon: Settings,
+  },
+];
+
+export function AgentSidebar() {
+  return (
+    <Sidebar variant={'floating'} className="top-16">
+      <SidebarHeader>
+        <p className="font-bold text-2xl">All nodes</p>
+      </SidebarHeader>
+      <SidebarContent>
+        <Collapsible defaultOpen className="group/collapsible">
+          <SidebarGroup>
+            <SidebarGroupLabel asChild>
+              <CollapsibleTrigger>
+                Help
+                <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+              </CollapsibleTrigger>
+            </SidebarGroupLabel>
+            <CollapsibleContent>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                      <SidebarMenuButton asChild>
+                        <a href={item.url}>
+                          <item.icon />
+                          <span>{item.title}</span>
+                        </a>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </CollapsibleContent>
+          </SidebarGroup>
+        </Collapsible>
+        <SidebarGroup>yyy</SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  );
+}

web/src/pages/agent/index.tsx

@@ -1,7 +1,9 @@
 import { PageHeader } from '@/components/page-header';
 import { Button } from '@/components/ui/button';
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
 import { useNavigatePage } from '@/hooks/logic-hooks/navigate-hooks';
 import { Trash2 } from 'lucide-react';
+import { AgentSidebar } from './agent-sidebar';
 
 export default function Agent() {
   const { navigateToAgentList } = useNavigatePage();
@@ -28,6 +30,12 @@ export default function Agent() {
           </Button>
         </div>
       </PageHeader>
+      <div>
+        <SidebarProvider>
+          <AgentSidebar />
+          <SidebarTrigger />
+        </SidebarProvider>
+      </div>
     </section>
   );
 }