shadcn

# What does this PR do?


## Test Plan

llama_stack/ui/components/app-sidebar.tsx

@@ -0,0 +1,56 @@
+import { MessageSquareText, MessagesSquare } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+
+
+const logItems = [
+  {
+    title: "Chat Completions",
+    url: "/logs/chat-completions",
+    icon: MessageSquareText,
+  },
+  {
+    title: "Responses",
+    url: "/logs/responses",
+    icon: MessagesSquare,
+  },
+]
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+        <SidebarHeader>
+            <a href="/">Llama Stack</a>
+        </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Logs</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {logItems.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}