Sidebar

templ SidebarDemo() {
	<div class="relative flex h-[500px] w-full max-w-3xl overflow-hidden rounded-md border">
		@ui.SidebarProvider(true, "h-full", nil) {
			@ui.Sidebar("border-r", nil) {
				@ui.SidebarHeader("", nil) {
					<div class="flex items-center gap-2 px-2 py-1">
						@icons.Package(icons.Props{Class: "h-6 w-6"})
						<span class="font-semibold text-sm">Acme Inc</span>
					</div>
				}
				@ui.SidebarContent("", nil) {
					@ui.SidebarGroup("", nil) {
						@ui.SidebarGroupLabel("", nil) {
							Platform
						}
						@ui.SidebarMenu("", nil) {
							@ui.SidebarMenuItem("", nil) {
								@ui.SidebarMenuButtonLink("#", true, "", nil) {
									@icons.Home(icons.Props{Class: "h-4 w-4"})
									<span>Home</span>
								}
							}
							@ui.SidebarMenuItem("", nil) {
								@ui.SidebarMenuButtonLink("#", false, "", nil) {
									@icons.Inbox(icons.Props{Class: "h-4 w-4"})
									<span>Inbox</span>
								}
							}
							@ui.SidebarMenuItem("", nil) {
								@ui.SidebarMenuButtonLink("#", false, "", nil) {
									@icons.Calendar(icons.Props{Class: "h-4 w-4"})
									<span>Calendar</span>
								}
							}
							@ui.SidebarMenuItem("", nil) {
								@ui.SidebarMenuButtonLink("#", false, "", nil) {
									@icons.Search(icons.Props{Class: "h-4 w-4"})
									<span>Search</span>
								}
							}
							@ui.SidebarMenuItem("", nil) {
								@ui.SidebarMenuButtonLink("#", false, "", nil) {
									@icons.Settings(icons.Props{Class: "h-4 w-4"})
									<span>Settings</span>
								}
							}
						}
					}
				}
				@ui.SidebarFooter("", nil) {
					@ui.SidebarMenu("", nil) {
						@ui.SidebarMenuItem("", nil) {
							@ui.SidebarMenuButton(false, "", nil) {
								@icons.User(icons.Props{Class: "h-4 w-4"})
								<span>shadcn</span>
							}
						}
					}
				}
			}
			@ui.SidebarInset("", nil) {
				<header class="flex h-12 items-center gap-2 border-b px-4">
					@ui.SidebarTrigger("", nil)
					<span class="text-sm font-medium">Dashboard</span>
				</header>
				<div class="flex flex-1 flex-col gap-4 p-4">
					<div class="grid auto-rows-min gap-4 md:grid-cols-3">
						<div class="aspect-video rounded-xl bg-muted/50"></div>
						<div class="aspect-video rounded-xl bg-muted/50"></div>
						<div class="aspect-video rounded-xl bg-muted/50"></div>
					</div>
					<div class="flex-1 rounded-xl bg-muted/50 p-4">
						<p class="text-sm text-muted-foreground">Main content area</p>
					</div>
				</div>
			}
		}
	</div>
}