sidebar component: hidden by default on desktop

[Sairenity]

Adding a sidebar to the default blazorblueprint template project doesn't seem to work properly. Here's what I've done:

1. generated a new blazorblueprint project using dotnet new blazorblueprint
2. updated _Imports.razor to reference @using BlazorBlueprint.Components.Sidebar
3. implemented the following Sidebar structure:

@inherits LayoutComponentBase

<div class="relative min-h-screen flex flex-col">
    <header class="sticky top-0 z-50 w-full border-b bg-background">
        <div class="container flex h-14 items-center">
            <div class="mr-4 flex">
                <a href="/" class="mr-6 flex items-center space-x-2">
                    <LucideIcon Name="box" Size="24" class="text-primary" />
                    <span class="font-bold">Test Project</span>
                </a>
            </div>
            <nav class="flex items-center space-x-6 text-sm font-medium">
                <NavLink href="/" Match="NavLinkMatch.All" class="transition-colors hover:text-foreground/80 text-foreground/60" ActiveClass="text-foreground">
                    Home
                </NavLink>
            </nav>
            <div class="flex flex-1 items-center justify-end space-x-2">
                <Button Variant="ButtonVariant.Ghost" Size="ButtonSize.Icon" @onclick="ToggleDarkMode">
                    @if (isDarkMode)
                    {
                        <LucideIcon Name="sun" Size="20" />
                    }
                    else
                    {
                        <LucideIcon Name="moon" Size="20" />
                    }
                </Button>
            </div>
        </div>
    </header>
    <SidebarProvider DefaultOpen="true" >
        <Sidebar>
            <SidebarHeader>
                <div class="flex items-center gap-2">
                    <div class="h-8 w-8 rounded-lg bg-primary" />
                    <span class="font-semibold">Acme Inc</span>
                </div>
            </SidebarHeader>
            <SidebarContent>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton IsActive="true">
                            <LucideIcon Name="home" />
                            Dashboard
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                    <SidebarMenuItem>
                        <SidebarMenuButton>
                            <LucideIcon Name="inbox" />
                            Inbox
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarContent>
            <SidebarFooter>
                <!-- User info -->
            </SidebarFooter>
        </Sidebar>
        <main class="flex-1">
            @Body
        </main>
    </SidebarProvider>

    <footer class="border-t py-6 md:py-0">
        <div class="container flex flex-col items-center justify-between gap-4 md:h-14 md:flex-row">
            <p class="text-sm text-muted-foreground">
                Built with <a href="https://blazorblueprintui.com" target="_blank" class="font-medium underline underline-offset-4">BlazorBlueprint</a>
            </p>
        </div>
    </footer>
</div>

<ToastProvider Position="ToastPosition.BottomRight" />
<PortalHost />

Expected result: I'd expect there to be a sidebar on desktop, and no sidebar on mobile
Actual result: There's no sidebar on either desktop nor mobile. Adding a <SidebarTrigger /> inside the <SidebarProvider> didn't help either.

It looks like the <aside> tag is correctly emitted to the DOM, but with a hidden class that causes it to be... well, hidden 😅

[mathewtaylor]

Hi @Sairenity, this should be resolved now with the latest release of the library. You don't need to update the template package, it should automatically pick up any 2.x release of the library so you can just rebuild and try again and let me know how it is.