@page "/components/sidebar"

<PageTitle>Sidebar — Lumeo</PageTitle>

<PageHeader Title="Sidebar" Description="A collapsible sidebar layout with groups, menus, header, and footer. Supports Push, Overlay, and Icon variants." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Application-level navigation with collapsible menu groups</li>
        <li>Admin panels and dashboard layouts with persistent navigation</li>
        <li>Multi-section apps that need icon-only, push, or overlay sidebar variants</li>
        <li>Any layout requiring a collapsible side panel with header, content, and footer areas</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Push (Default)" Code="@_pushCode">
        <Stack Class="h-[400px] w-full rounded-lg border overflow-hidden">
            <SidebarProvider @bind-IsCollapsed="_pushCollapsed">
                <SidebarComponent>
                    <SidebarHeader>
                        <Flex Gap="2" Align="center" Class="px-2">
                            <Stack Class="h-6 w-6 rounded bg-primary"></Stack>
                            <Lumeo.Text As="span" Size="sm" Class="font-semibold text-foreground">Acme Inc</Lumeo.Text>
                        </Flex>
                    </SidebarHeader>
                    <SidebarContent>
                        <SidebarGroup>
                            <SidebarGroupLabel>Platform</SidebarGroupLabel>
                            <SidebarMenu>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#" IsActive="true">
                                        <IconContent><DynamicIcon Name="House" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Dashboard</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#">
                                        <IconContent><DynamicIcon Name="Users" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Team</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#">
                                        <IconContent><DynamicIcon Name="Settings" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Settings</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            </SidebarMenu>
                        </SidebarGroup>
                    </SidebarContent>
                    <SidebarFooter>
                        <Flex Gap="2" Align="center" Class="px-2">
                            <Avatar Src="" Fallback="CN" />
                            <Lumeo.Text As="span" Size="sm" Class="text-foreground">User</Lumeo.Text>
                        </Flex>
                    </SidebarFooter>
                </SidebarComponent>
                <main class="flex-1 p-6">
                    <SidebarTrigger />
                    <Lumeo.Text Size="sm" Color="muted" Class="mt-4">Sidebar pushes the main content. Fully hidden when collapsed.</Lumeo.Text>
                </main>
            </SidebarProvider>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Overlay" Code="@_overlayCode">
        <Stack Class="h-[400px] w-full rounded-lg border overflow-hidden">
            <SidebarProvider @bind-IsCollapsed="_overlayCollapsed" Variant="SidebarProvider.SidebarVariant.Overlay">
                <SidebarComponent>
                    <SidebarHeader>
                        <Flex Gap="2" Align="center" Class="px-2">
                            <Stack Class="h-6 w-6 rounded bg-primary"></Stack>
                            <Lumeo.Text As="span" Size="sm" Class="font-semibold text-foreground">Workspace</Lumeo.Text>
                        </Flex>
                    </SidebarHeader>
                    <SidebarContent>
                        <SidebarGroup>
                            <SidebarGroupLabel>Navigation</SidebarGroupLabel>
                            <SidebarMenu>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#" IsActive="true">
                                        <IconContent><DynamicIcon Name="House" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Home</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#">
                                        <IconContent><DynamicIcon Name="Search" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Search</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#">
                                        <IconContent><DynamicIcon Name="Bell" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Notifications</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#">
                                        <IconContent><DynamicIcon Name="Settings" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Settings</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            </SidebarMenu>
                        </SidebarGroup>
                    </SidebarContent>
                </SidebarComponent>
                <main class="flex-1 p-6">
                    <SidebarTrigger />
                    <Lumeo.Text Size="sm" Color="muted" Class="mt-4">Sidebar slides over the main content. Click the backdrop to dismiss.</Lumeo.Text>
                </main>
            </SidebarProvider>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Side — interactive" Code="@_sideInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live.</Lumeo.Text>
            <Segmented @bind-Value="_sidebarSideSel" Options="_sidebarSideOptions" />
            <Stack Class="h-[320px] w-full rounded-lg border overflow-hidden">
                <SidebarProvider>
                    <SidebarComponent Side="@(_activeSidebarSide)">
                        <SidebarHeader>
                            <Flex Gap="2" Align="center" Class="px-2">
                                <Stack Class="h-6 w-6 rounded bg-primary"></Stack>
                                <Lumeo.Text As="span" Size="sm" Class="font-semibold text-foreground">@_sidebarSideSel Side</Lumeo.Text>
                            </Flex>
                        </SidebarHeader>
                        <SidebarContent>
                            <SidebarGroup>
                                <SidebarGroupLabel>Navigation</SidebarGroupLabel>
                                <SidebarMenu>
                                    <SidebarMenuItem>
                                        <SidebarMenuButton Href="#" IsActive="true">
                                            <IconContent><DynamicIcon Name="House" Class="h-4 w-4" /></IconContent>
                                            <LabelContent><Lumeo.Text As="span">Dashboard</Lumeo.Text></LabelContent>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                    <SidebarMenuItem>
                                        <SidebarMenuButton Href="#">
                                            <IconContent><DynamicIcon Name="Settings" Class="h-4 w-4" /></IconContent>
                                            <LabelContent><Lumeo.Text As="span">Settings</Lumeo.Text></LabelContent>
                                        </SidebarMenuButton>
                                    </SidebarMenuItem>
                                </SidebarMenu>
                            </SidebarGroup>
                        </SidebarContent>
                    </SidebarComponent>
                    <main class="flex-1 p-6">
                        <SidebarTrigger />
                        <Lumeo.Text Size="sm" Color="muted" Class="mt-4">Sidebar appears on the @_sidebarSideSel.ToLower().</Lumeo.Text>
                    </main>
                </SidebarProvider>
            </Stack>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Icon" Code="@_iconCode">
        <Stack Class="h-[400px] w-full rounded-lg border overflow-hidden">
            <SidebarProvider @bind-IsCollapsed="_iconCollapsed" Variant="SidebarProvider.SidebarVariant.Icon">
                <SidebarComponent>
                    <SidebarContent>
                        <SidebarGroup>
                            <SidebarMenu>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#" IsActive="true" Tooltip="Home">
                                        <IconContent><DynamicIcon Name="House" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Home</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#" Tooltip="Search">
                                        <IconContent><DynamicIcon Name="Search" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Search</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#" Tooltip="Notifications">
                                        <IconContent><DynamicIcon Name="Bell" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Notifications</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                                <SidebarMenuItem>
                                    <SidebarMenuButton Href="#" Tooltip="Settings">
                                        <IconContent><DynamicIcon Name="Settings" Class="h-4 w-4" /></IconContent>
                                        <LabelContent><Lumeo.Text As="span">Settings</Lumeo.Text></LabelContent>
                                    </SidebarMenuButton>
                                </SidebarMenuItem>
                            </SidebarMenu>
                        </SidebarGroup>
                    </SidebarContent>
                </SidebarComponent>
                <main class="flex-1 p-6">
                    <SidebarTrigger />
                    <Lumeo.Text Size="sm" Color="muted" Class="mt-4">Compact icon-only sidebar. Toggle to expand with labels.</Lumeo.Text>
                </main>
            </SidebarProvider>
        </Stack>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> The sidebar toggle trigger and all menu buttons now meet the 44×44 px minimum touch-target size, making the sidebar fully navigable on touch screens.
</Alert>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="sidebarprovider" Level="3" Class="mt-8 scroll-mt-20">SidebarProvider</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The sidebar and main content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsCollapsed</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Controls the sidebar collapsed state. Use with @@bind-IsCollapsed.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsCollapsedChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">-</TableCell><TableCell>Callback invoked when the collapsed state changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Variant</TableCell><TableCell Class="font-mono text-xs">SidebarVariant</TableCell><TableCell Class="font-mono text-xs">Push</TableCell><TableCell>Sidebar display mode. Values: Push, Overlay, Icon.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="sidebarcomponent" Level="3" Class="mt-8 scroll-mt-20">SidebarComponent</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The sidebar content (header, content, footer).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Side</TableCell><TableCell Class="font-mono text-xs">SidebarSide</TableCell><TableCell Class="font-mono text-xs">Left</TableCell><TableCell>Which side the sidebar appears on. Values: Left, Right.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="sidebarmenubutton" Level="3" Class="mt-8 scroll-mt-20">SidebarMenuButton</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Fallback content when Icon/Label are not used.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IconContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Icon slot rendered at the start of the button.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">LabelContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Label slot hidden when sidebar is collapsed.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Href</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Navigation URL. Renders as an anchor when set.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Tooltip</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Tooltip text shown when the sidebar is collapsed.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsActive</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Highlights the button as the active/current item.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="sidebar-layout-components" Level="3" Class="mt-8 scroll-mt-20">SidebarHeader / SidebarContent / SidebarFooter / SidebarGroup / SidebarGroupLabel / SidebarMenu / SidebarMenuItem / SidebarSeparator / SidebarTrigger</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The component content. All layout sub-components accept ChildContent.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes. SidebarTrigger toggles collapsed state. SidebarGroupLabel hides text when collapsed. SidebarSeparator has no ChildContent.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/navigation-menu" class="text-primary hover:underline">NavigationMenu</a> — Horizontal navigation bar for top-level page links</li>
        <li><a href="/components/sheet" class="text-primary hover:underline">Sheet</a> — Slide-in overlay panel for temporary content or actions</li>
        <li><a href="/components/drawer" class="text-primary hover:underline">Drawer</a> — Bottom or side drawer for mobile-friendly navigation</li>
    </ul>
</div>

@code {
    private bool _pushCollapsed;
    private bool _overlayCollapsed = true;
    private bool _iconCollapsed = true;

    // Interactive: Side
    private string _sidebarSideSel = "Left";
    private SidebarComponent.SidebarSide _activeSidebarSide => Enum.Parse<SidebarComponent.SidebarSide>(_sidebarSideSel);
    private List<Segmented.SegmentedOption> _sidebarSideOptions = new()
    {
        new() { Label = "Left", Value = "Left" },
        new() { Label = "Right", Value = "Right" },
    };
    private string _sideInteractiveCode = @"<Segmented @bind-Value=""_sidebarSideSel"" Options=""_sidebarSideOptions"" />
<SidebarProvider>
    <SidebarComponent Side=""@_activeSidebarSide"">
        <SidebarHeader>...</SidebarHeader>
        <SidebarContent>...</SidebarContent>
    </SidebarComponent>
    <main class=""flex-1 p-6"">
        <SidebarTrigger />
    </main>
</SidebarProvider>

@code {
    private string _sidebarSideSel = ""Left"";
    private SidebarComponent.SidebarSide _activeSidebarSide =>
        Enum.Parse<SidebarComponent.SidebarSide>(_sidebarSideSel);
    private List<Segmented.SegmentedOption> _sidebarSideOptions = new()
    {
        new() { Label = ""Left"", Value = ""Left"" },
        new() { Label = ""Right"", Value = ""Right"" },
    };
}";

    private string _pushCode = @"<SidebarProvider @bind-IsCollapsed=""_isCollapsed"">
    <SidebarComponent>
        <SidebarHeader>
            <Lumeo.Text As=""span"" Size=""sm"" Weight=""semibold"">Acme Inc</Lumeo.Text>
        </SidebarHeader>
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel>Platform</SidebarGroupLabel>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton Href=""#"" IsActive=""true"">
                            <IconContent><Blazicon Svg=""Lucide.House"" class=""h-4 w-4"" /></IconContent>
                            <LabelContent><span>Dashboard</span></LabelContent>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>
            <Avatar Src="""" Fallback=""CN"" />
        </SidebarFooter>
    </SidebarComponent>
    <main class=""flex-1 p-6"">
        <SidebarTrigger />
    </main>
</SidebarProvider>";

    private string _overlayCode = @"<SidebarProvider @bind-IsCollapsed=""_isCollapsed"" Variant=""SidebarProvider.SidebarVariant.Overlay"">
    <SidebarComponent>
        <SidebarHeader>
            <Lumeo.Text As=""span"" Size=""sm"" Weight=""semibold"">Workspace</Lumeo.Text>
        </SidebarHeader>
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel>Navigation</SidebarGroupLabel>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton Href=""#"" IsActive=""true"">
                            <IconContent><Blazicon Svg=""Lucide.House"" class=""h-4 w-4"" /></IconContent>
                            <LabelContent><span>Home</span></LabelContent>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarGroup>
        </SidebarContent>
    </SidebarComponent>
    <main class=""flex-1 p-6"">
        <SidebarTrigger />
        <Lumeo.Text Size=""sm"" Color=""muted"">Click backdrop to dismiss.</Lumeo.Text>
    </main>
</SidebarProvider>";

    private string _iconCode = @"<SidebarProvider @bind-IsCollapsed=""_isCollapsed"" Variant=""SidebarProvider.SidebarVariant.Icon"">
    <SidebarComponent>
        <SidebarContent>
            <SidebarGroup>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton Href=""#"" IsActive=""true"" Tooltip=""Home"">
                            <IconContent><Blazicon Svg=""Lucide.House"" class=""h-4 w-4"" /></IconContent>
                            <LabelContent><span>Home</span></LabelContent>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarGroup>
        </SidebarContent>
    </SidebarComponent>
    <main class=""flex-1 p-6"">
        <SidebarTrigger />
        <Lumeo.Text Size=""sm"" Color=""muted"">Toggle to expand with labels.</Lumeo.Text>
    </main>
</SidebarProvider>";
}
