Sidebar with Calendar

A sidebar with a date picker calendar and collapsible calendar groups.

Sidebar
Calendar
Checkbox
Collapsible

Preview

October 2024

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>