Sidebar with Team Switcher

<BbSidebarProvider>
    <BbSidebar>
        <BbSidebarHeader>
            <BbDropdownMenu>
                <BbDropdownMenuTrigger>
                    <BbButton Variant="ButtonVariant.Ghost" Class="w-full justify-start gap-2 px-2 h-12">
                        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shrink-0">
                            <LucideIcon Name="building-2" class="h-4 w-4" />
                        </div>
                        <div class="flex flex-col items-start text-left flex-1 min-w-0">
                            <span class="text-sm font-semibold truncate">Acme Inc</span>
                            <span class="text-[10px] text-muted-foreground">Free Plan</span>
                        </div>
                        <LucideIcon Name="chevrons-up-down" class="h-4 w-4 text-muted-foreground" />
                    </BbButton>
                </BbDropdownMenuTrigger>
                <BbDropdownMenuContent MatchTriggerWidth="true">
                    <BbDropdownMenuLabel>Teams</BbDropdownMenuLabel>
                    <BbDropdownMenuSeparator />
                    <BbDropdownMenuItem>
                        <!-- Team items with icons and plan details -->
                        Acme Inc
                    </BbDropdownMenuItem>
                    <BbDropdownMenuSeparator />
                    <BbDropdownMenuItem>Create Team</BbDropdownMenuItem>
                </BbDropdownMenuContent>
            </BbDropdownMenu>
        </BbSidebarHeader>
        <BbSidebarContent>
            <BbSidebarGroup>
                <BbSidebarGroupLabel>Platform</BbSidebarGroupLabel>
                <BbSidebarMenu>
                    <BbSidebarMenuItem>
                        <BbCollapsible DefaultOpen="true">
                            <BbSidebarMenuButton IsActive="true">
                                <LucideIcon Name="square-terminal" class="h-4 w-4" />
                                <span>Playground</span>
                                <LucideIcon Name="chevron-right" class="ml-auto h-4 w-4" />
                            </BbSidebarMenuButton>
                            <BbCollapsibleContent>
                                <BbSidebarMenuSub>
                                    <BbSidebarMenuSubItem>
                                        <BbSidebarMenuSubButton Href="/playground/history" IsActive="true">
                                            <span>History</span>
                                        </BbSidebarMenuSubButton>
                                    </BbSidebarMenuSubItem>
                                    <!-- More sub-items... -->
                                </BbSidebarMenuSub>
                            </BbCollapsibleContent>
                        </BbCollapsible>
                    </BbSidebarMenuItem>
                    <!-- More items... -->
                </BbSidebarMenu>
            </BbSidebarGroup>
        </BbSidebarContent>
        <BbSidebarFooter>
            <BbDropdownMenu>
                <BbDropdownMenuTrigger>
                    <BbButton Variant="ButtonVariant.Ghost" Class="w-full justify-start gap-2 px-2 h-10">
                        <BbAvatar Size="AvatarSize.Small">
                            <BbAvatarFallback>TS</BbAvatarFallback>
                        </BbAvatar>
                        <div class="flex flex-col items-start text-left flex-1 min-w-0">
                            <span class="text-sm font-medium truncate">Tom Smith</span>
                            <span class="text-xs text-muted-foreground truncate">[email protected]</span>
                        </div>
                        <LucideIcon Name="chevrons-up-down" class="h-4 w-4 text-muted-foreground" />
                    </BbButton>
                </BbDropdownMenuTrigger>
                <BbDropdownMenuContent Side="PopoverSide.Top" Align="PopoverAlign.Start" MatchTriggerWidth="true">
                    <BbDropdownMenuLabel>My Account</BbDropdownMenuLabel>
                    <BbDropdownMenuSeparator />
                    <BbDropdownMenuItem>Profile</BbDropdownMenuItem>
                    <BbDropdownMenuItem>Settings</BbDropdownMenuItem>
                    <BbDropdownMenuSeparator />
                    <BbDropdownMenuItem>Log out</BbDropdownMenuItem>
                </BbDropdownMenuContent>
            </BbDropdownMenu>
        </BbSidebarFooter>
    </BbSidebar>
    <BbSidebarInset>
        <!-- Your content here -->
    </BbSidebarInset>
</BbSidebarProvider>