A sidebar with submenus

templ Sidebar03Preview() {
	@PreviewLayout("Sidebar 03 Preview") {
		<div class="flex h-screen bg-background">
			@ui.Sidebar(ui.SidebarProps{
				Side:        "left",
				Variant:     "inset",
				Collapsible: "none",
				DOMProps: ui.DOMProps{
					Class: "border-r border-border/70",
				},
			}) {
				@ui.SidebarHeader(ui.DOMProps{Class: "p-4 border-b border-border/70"}) {
					<div class="flex items-center gap-2 font-semibold">
						<span class="flex size-7 items-center justify-center rounded-md bg-primary text-xs text-primary-foreground">S</span>
						<span>App</span>
					</div>
				}
				@ui.SidebarContent(ui.DOMProps{}) {
					@ui.SidebarGroup(ui.DOMProps{}) {
						@ui.SidebarGroupLabel(ui.DOMProps{}) { <span>Main</span> }
						@ui.SidebarGroupContent(ui.DOMProps{}) {
							@ui.SidebarMenu(ui.DOMProps{}) {
								@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{IsActive: true}) { <span>Dashboard</span> } }
								@ui.SidebarMenuItem(ui.DOMProps{}) {
									@ui.SidebarMenuButton(ui.SidebarMenuButtonProps{}) { <span>Products</span> }
									@ui.SidebarMenuSub(ui.DOMProps{}) {
										@ui.SidebarMenuSubItem(ui.DOMProps{}) { @ui.SidebarMenuSubButton(ui.SidebarMenuButtonProps{Size: "sm"}) { <span>All Products</span> } }
										@ui.SidebarMenuSubItem(ui.DOMProps{}) { @ui.SidebarMenuSubButton(ui.SidebarMenuButtonProps{Size: "sm"}) { <span>Categories</span> } }
									}
								}
								@ui.SidebarMenuItem(ui.DOMProps{}) {
									@ui.SidebarMenuButton(ui.SidebarMenuButtonProps{}) { <span>Settings</span> }
									@ui.SidebarMenuSub(ui.DOMProps{}) {
										@ui.SidebarMenuSubItem(ui.DOMProps{}) { @ui.SidebarMenuSubButton(ui.SidebarMenuButtonProps{Size: "sm"}) { <span>Profile</span> } }
										@ui.SidebarMenuSubItem(ui.DOMProps{}) { @ui.SidebarMenuSubButton(ui.SidebarMenuButtonProps{Size: "sm"}) { <span>Team</span> } }
									}
								}
							}
						}
					}
				}
			}
			<main class="flex-1 p-6">
				<div class="flex items-center justify-between mb-6">
					<h1 class="text-2xl font-semibold">Dashboard</h1>
				</div>
				@ui.Card(ui.DOMProps{}) {
					@ui.CardHeader(ui.DOMProps{}) {
						@ui.CardTitle(ui.DOMProps{}) { <span>Sidebar with Submenus</span> }
						@ui.CardDescription(ui.DOMProps{}) { <span>Nested navigation states for complex applications</span> }
					}
					@ui.CardContent(ui.DOMProps{}) {
						<p class="text-sm text-muted-foreground">This sidebar pattern supports hierarchical navigation with expandable submenu states.</p>
					}
				}
			</main>
		</div>
	}
}