Sidebar with Calendar
A sidebar with a date picker calendar and collapsible calendar groups.
Sidebar
Calendar
Checkbox
Collapsible
Preview
Code
<BbSidebarProvider>
<BbSidebar>
<BbSidebarHeader>
<BbDropdownMenu>
<BbDropdownMenuTrigger>
<BbButton Variant="ButtonVariant.Ghost" Class="w-full justify-start gap-2 px-2 h-12">
<BbAvatar Size="AvatarSize.Small">
<BbAvatarFallback>SC</BbAvatarFallback>
</BbAvatar>
<div class="flex flex-col items-start text-left flex-1 min-w-0">
<span class="text-sm font-semibold truncate">shadcn</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 MatchTriggerWidth="true">
<BbDropdownMenuLabel>My Account</BbDropdownMenuLabel>
<BbDropdownMenuSeparator />
<BbDropdownMenuItem>Profile</BbDropdownMenuItem>
<BbDropdownMenuItem>Settings</BbDropdownMenuItem>
<BbDropdownMenuSeparator />
<BbDropdownMenuItem>Log out</BbDropdownMenuItem>
</BbDropdownMenuContent>
</BbDropdownMenu>
</BbSidebarHeader>
<div class="shrink-0 p-2 pb-0">
<div class="flex justify-center">
<BbCalendar @bind-Selected="selectedDate"
ShowMonthYearDropdowns="false"
class="rounded-md bg-background p-2" />
</div>
</div>
<BbSidebarContent>
<BbSidebarGroup>
<BbCollapsible DefaultOpen="true">
<BbSidebarGroupLabel>
<BbCollapsibleTrigger AsChild="false" Class="flex-1 flex items-center justify-between">
My Calendars
<LucideIcon Name="chevron-down" class="h-4 w-4" />
</BbCollapsibleTrigger>
</BbSidebarGroupLabel>
<BbCollapsibleContent>
<BbSidebarMenu>
<BbSidebarMenuItem>
<div class="flex items-center gap-2 px-2 py-1.5">
<BbCheckbox @bind-Checked="personalChecked" />
<span class="text-sm">Personal</span>
</div>
</BbSidebarMenuItem>
<!-- More calendar items... -->
</BbSidebarMenu>
</BbCollapsibleContent>
</BbCollapsible>
</BbSidebarGroup>
<BbSidebarGroup>
<BbCollapsible>
<BbSidebarGroupLabel>
<BbCollapsibleTrigger AsChild="false" Class="flex-1 flex items-center justify-between">
Favorites
<LucideIcon Name="chevron-right" class="h-4 w-4" />
</BbCollapsibleTrigger>
</BbSidebarGroupLabel>
<BbCollapsibleContent>
<BbSidebarMenu>
<!-- Calendar items with checkboxes... -->
</BbSidebarMenu>
</BbCollapsibleContent>
</BbCollapsible>
</BbSidebarGroup>
</BbSidebarContent>
<BbSidebarFooter>
<BbSidebarMenu>
<BbSidebarMenuItem>
<BbSidebarMenuButton>
<LucideIcon Name="plus" class="h-4 w-4" />
<span>New Calendar</span>
</BbSidebarMenuButton>
</BbSidebarMenuItem>
</BbSidebarMenu>
</BbSidebarFooter>
</BbSidebar>
<BbSidebarInset>
<!-- Your calendar content here -->
</BbSidebarInset>
</BbSidebarProvider>