A sidebar that collapses to icons

templ Sidebar07Preview() {
	@PreviewLayout("Sidebar 07 Preview") {
		<div class="flex h-screen bg-background">
			@ui.Sidebar(ui.SidebarProps{
				Side:        "left",
				Variant:     "sidebar",
				Collapsible: "icon",
				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-8 items-center justify-center rounded-md bg-primary text-sm text-primary-foreground">S</span>
						<span class="sidebar-text">App</span>
					</div>
				}
				@ui.SidebarContent(ui.DOMProps{}) {
					@ui.SidebarGroup(ui.DOMProps{}) {
						@ui.SidebarMenu(ui.DOMProps{}) {
							@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{IsActive: true, Size: "sm"}) { <span class="sidebar-text">Dashboard</span> } }
							@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{Size: "sm"}) { <span class="sidebar-text">Projects</span> } }
							@ui.SidebarMenuItem(ui.DOMProps{}) { @ui.SidebarMenuButton(ui.SidebarMenuButtonProps{Size: "sm"}) { <span class="sidebar-text">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>
					@ui.Button(ui.ButtonProps{Label: "Collapse Sidebar", Variant: ui.ButtonVariantOutline, Size: ui.ButtonSizeSM, DOMProps: ui.DOMProps{Attrs: t.Attributes{"type": "button"}}})
				</div>
				<div class="grid gap-4 md:grid-cols-2">
					@ui.Card(ui.DOMProps{}) {
						@ui.CardHeader(ui.DOMProps{}) {
							@ui.CardTitle(ui.DOMProps{}) { <span>Quick Stats</span> }
						}
						@ui.CardContent(ui.DOMProps{}) {
							<p class="text-sm text-muted-foreground">A compact sidebar that collapses to icons, maximizing content space.</p>
						}
					}
					@ui.Card(ui.DOMProps{}) {
						@ui.CardHeader(ui.DOMProps{}) {
							@ui.CardTitle(ui.DOMProps{}) { <span>Navigation</span> }
						}
						@ui.CardContent(ui.DOMProps{}) {
							<p class="text-sm text-muted-foreground">Icon-only mode for mobile or space-constrained layouts.</p>
						}
					}
				</div>
			</main>
		</div>
	}
}