Sidebar with Groups

<BbSidebarProvider>
    <BbSidebar>
        <BbSidebarHeader>
            <div class="flex items-center gap-2 px-2 h-10">
                <div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground">
                    <LucideIcon Name="blocks" class="h-4 w-4" />
                </div>
                <div class="flex flex-col">
                    <span class="text-sm font-semibold leading-none">Acme Corp</span>
                    <span class="text-[10px] text-muted-foreground">Enterprise</span>
                </div>
            </div>
        </BbSidebarHeader>
        <BbSidebarContent>
            <BbSidebarGroup>
                <BbSidebarGroupLabel>Overview</BbSidebarGroupLabel>
                <BbSidebarMenu>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/dashboard" IsActive="true">
                            <LucideIcon Name="layout-dashboard" class="h-4 w-4" />
                            <span>Dashboard</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/analytics">
                            <LucideIcon Name="bar-chart-3" class="h-4 w-4" />
                            <span>Analytics</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/activity">
                            <LucideIcon Name="activity" class="h-4 w-4" />
                            <span>Activity</span>
                            <BbBadge Variant="BadgeVariant.Secondary" Class="ml-auto h-5 px-1.5 text-[10px]">New</BbBadge>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                </BbSidebarMenu>
            </BbSidebarGroup>
            <BbSidebarGroup>
                <BbSidebarGroupLabel>Content</BbSidebarGroupLabel>
                <BbSidebarMenu>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/pages">
                            <LucideIcon Name="file-text" class="h-4 w-4" />
                            <span>Pages</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/media">
                            <LucideIcon Name="image" class="h-4 w-4" />
                            <span>Media</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/collections">
                            <LucideIcon Name="folder" class="h-4 w-4" />
                            <span>Collections</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                </BbSidebarMenu>
            </BbSidebarGroup>
            <BbSidebarGroup>
                <BbSidebarGroupLabel>Management</BbSidebarGroupLabel>
                <BbSidebarMenu>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/team">
                            <LucideIcon Name="users" class="h-4 w-4" />
                            <span>Team</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/roles">
                            <LucideIcon Name="shield" class="h-4 w-4" />
                            <span>Roles</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/billing">
                            <LucideIcon Name="credit-card" class="h-4 w-4" />
                            <span>Billing</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                    <BbSidebarMenuItem>
                        <BbSidebarMenuButton Href="/settings">
                            <LucideIcon Name="settings" class="h-4 w-4" />
                            <span>Settings</span>
                        </BbSidebarMenuButton>
                    </BbSidebarMenuItem>
                </BbSidebarMenu>
            </BbSidebarGroup>
        </BbSidebarContent>
        <BbSidebarFooter>
            <div class="flex items-center gap-2 px-2 py-2">
                <BbAvatar Size="AvatarSize.Small">
                    <BbAvatarFallback>SM</BbAvatarFallback>
                </BbAvatar>
                <div class="flex flex-col flex-1 min-w-0">
                    <span class="text-sm font-medium truncate">Sarah Miller</span>
                    <span class="text-xs text-muted-foreground truncate">[email protected]</span>
                </div>
            </div>
        </BbSidebarFooter>
    </BbSidebar>
    <BbSidebarInset>
        <!-- Your content here -->
    </BbSidebarInset>
</BbSidebarProvider>