1  import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
  2  import { ThemeProvider } from "@/components/theme-provider"
  3  import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
  4  import {
  5    Breadcrumb,
  6    BreadcrumbItem,
  7    BreadcrumbLink,
  8    BreadcrumbList,
  9    BreadcrumbPage,
 10    BreadcrumbSeparator,
 11  } from "@/components/ui/breadcrumb"
 12  import { Separator } from "@/components/ui/separator"
 13  import {
 14    SidebarInset,
 15    SidebarProvider,
 16    SidebarTrigger,
 17  } from "@/components/ui/sidebar"
 18  
 19  const items = [
 20    {
 21      title: "Home",
 22      url: "#",
 23      icon: Home,
 24    },
 25    {
 26      title: "Inbox",
 27      url: "#",
 28      icon: Inbox,
 29    },
 30    {
 31      title: "Calendar",
 32      url: "#",
 33      icon: Calendar,
 34    },
 35    {
 36      title: "Search",
 37      url: "#",
 38      icon: Search,
 39    },
 40    {
 41      title: "Settings",
 42      url: "#",
 43      icon: Settings,
 44    },
 45  ]
 46  
 47  function App() {
 48    return (
 49      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
 50        <SidebarProvider>
 51          <Sidebar>
 52            <SidebarContent>
 53              <SidebarGroup>
 54                <SidebarGroupLabel>Application</SidebarGroupLabel>
 55                <SidebarGroupContent>
 56                  <SidebarMenu>
 57                    {items.map((item) => (
 58                      <SidebarMenuItem key={item.title}>
 59                        <SidebarMenuButton asChild>
 60                          <a href={item.url}>
 61                            <item.icon />
 62                            <span>{item.title}</span>
 63                          </a>
 64                        </SidebarMenuButton>
 65                      </SidebarMenuItem>
 66                    ))}
 67                  </SidebarMenu>
 68                </SidebarGroupContent>
 69              </SidebarGroup>
 70            </SidebarContent>
 71          </Sidebar>
 72          <SidebarInset>
 73            <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
 74              <div className="flex items-center gap-2 px-4">
 75                <SidebarTrigger className="-ml-1" />
 76                <Separator orientation="vertical" className="mr-2 h-4" />
 77                <Breadcrumb>
 78                  <BreadcrumbList>
 79                    <BreadcrumbItem className="hidden md:block">
 80                      <BreadcrumbLink href="#">
 81                        Building Your Application
 82                      </BreadcrumbLink>
 83                    </BreadcrumbItem>
 84                    <BreadcrumbSeparator className="hidden md:block" />
 85                    <BreadcrumbItem>
 86                      <BreadcrumbPage>Data Fetching</BreadcrumbPage>
 87                    </BreadcrumbItem>
 88                  </BreadcrumbList>
 89                </Breadcrumb>
 90              </div>
 91            </header>
 92            <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
 93              <div className="grid auto-rows-min gap-4 md:grid-cols-3">
 94                <div className="aspect-video rounded-xl bg-muted/50" />
 95                <div className="aspect-video rounded-xl bg-muted/50" />
 96                <div className="aspect-video rounded-xl bg-muted/50" />
 97              </div>
 98              <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
 99            </div>
100          </SidebarInset>
101        </SidebarProvider>
102      </ThemeProvider>
103    )
104  }
105  
106  export default App