@page "/components/bottom-nav"

<PageTitle>Bottom Nav — Lumeo</PageTitle>

<PageHeader Title="Bottom Nav" Description="Mobile-first bottom tab bar with icons, labels, badges, safe-area padding, and an optional floating action button. Pair with Sidebar for responsive app layouts." />

<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>Mobile or touch-first apps that need 3–5 top-level destinations always reachable</li>
        <li>As the small-screen half of a responsive pair: <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">Sidebar</code> on desktop, <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">BottomNav</code> on mobile</li>
        <li>Thumb-zone primary actions (center FAB for "Create", "Compose", "Scan")</li>
    </ul>
    <Lumeo.Text Size="sm" Color="muted" Class="pt-2">
        Not for: deep navigation hierarchies, admin panels, or more than ~5 items. Use
        <Lumeo.Link Href="components/sidebar" Class="text-foreground underline underline-offset-4 hover:text-muted-foreground transition-colors">Sidebar</Lumeo.Link>,
        <Lumeo.Link Href="components/tabs" Class="text-foreground underline underline-offset-4 hover:text-muted-foreground transition-colors">Tabs</Lumeo.Link>, or
        <Lumeo.Link Href="components/navigation-menu" Class="text-foreground underline underline-offset-4 hover:text-muted-foreground transition-colors">Navigation Menu</Lumeo.Link> for those.
    </Lumeo.Text>
</div>

<Stack Gap="8" Class="mt-6">

    <!-- Basic -->
    <ComponentDemo Title="Basic" Code="@_basicCode">
        <Stack Class="h-[220px] w-full rounded-lg border border-border/40 bg-muted/30 relative overflow-hidden">
            <Flex Align="center" Justify="center" Class="flex-1 text-muted-foreground text-sm">App content area</Flex>
            <BottomNav Fixed="false">
                <BottomNavItem Href="#home" Label="Home" IsActive="true">
                    <IconContent><Icon Name="House" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#search" Label="Search">
                    <IconContent><Icon Name="Search" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#inbox" Label="Inbox">
                    <IconContent><Icon Name="Inbox" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#profile" Label="Profile">
                    <IconContent><Icon Name="User" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
            </BottomNav>
        </Stack>
    </ComponentDemo>

    <!-- With badges -->
    <ComponentDemo Title="With Badges" Code="@_badgeCode">
        <Stack Class="h-[220px] w-full rounded-lg border border-border/40 bg-muted/30 relative overflow-hidden">
            <Flex Align="center" Justify="center" Class="flex-1 text-muted-foreground text-sm">Unread indicators</Flex>
            <BottomNav Fixed="false">
                <BottomNavItem Href="#home" Label="Home" IsActive="true">
                    <IconContent><Icon Name="House" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#chat" Label="Chat">
                    <IconContent><Icon Name="MessageCircle" Size="Icon.IconSize.Sm" /></IconContent>
                    <Badge>3</Badge>
                </BottomNavItem>
                <BottomNavItem Href="#inbox" Label="Inbox">
                    <IconContent><Icon Name="Inbox" Size="Icon.IconSize.Sm" /></IconContent>
                    <Badge>12</Badge>
                </BottomNavItem>
                <BottomNavItem Href="#profile" Label="Profile">
                    <IconContent><Icon Name="User" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
            </BottomNav>
        </Stack>
    </ComponentDemo>

    <!-- With FAB -->
    <ComponentDemo Title="With Center FAB" Code="@_fabCode">
        <Stack Class="h-[220px] w-full rounded-lg border border-border/40 bg-muted/30 relative overflow-hidden">
            <Flex Align="center" Justify="center" Class="flex-1 text-muted-foreground text-sm">Primary action in the thumb zone</Flex>
            <BottomNav Fixed="false">
                <BottomNavItem Href="#home" Label="Home" IsActive="true">
                    <IconContent><Icon Name="House" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#search" Label="Search">
                    <IconContent><Icon Name="Search" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavFab AriaLabel="Create new" OnClick="HandleCreate">
                    <Icon Name="Plus" Size="Icon.IconSize.Md" />
                </BottomNavFab>
                <BottomNavItem Href="#inbox" Label="Inbox">
                    <IconContent><Icon Name="Inbox" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#profile" Label="Profile">
                    <IconContent><Icon Name="User" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
            </BottomNav>
        </Stack>
    </ComponentDemo>

    <!-- Animated transitions -->
    <ComponentDemo Title="Animated Transitions" Code="@_animatedCode">
        <Stack Class="h-[220px] w-full rounded-lg border border-border/40 bg-muted/30 relative overflow-hidden">
            <Flex Align="center" Justify="center" Class="flex-1 text-muted-foreground text-sm">
                Click a tab — active highlight glides in.
            </Flex>
            <BottomNav Fixed="false" AnimatedIndicator="true">
                <BottomNavItem Label="Home" IsActive="@(_activeTab == "home")" OnClick="@(() => _activeTab = "home")">
                    <IconContent><Icon Name="House" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Label="Search" IsActive="@(_activeTab == "search")" OnClick="@(() => _activeTab = "search")">
                    <IconContent><Icon Name="Search" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Label="Inbox" IsActive="@(_activeTab == "inbox")" OnClick="@(() => _activeTab = "inbox")">
                    <IconContent><Icon Name="Inbox" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Label="Profile" IsActive="@(_activeTab == "profile")" OnClick="@(() => _activeTab = "profile")">
                    <IconContent><Icon Name="User" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
            </BottomNav>
        </Stack>
    </ComponentDemo>

    <!-- Variant interactive -->
    <ComponentDemo Title="Variant — interactive" Code="@_variantInteractiveCode">
        <Stack Gap="4">
            <Lumeo.Text Size="sm" Color="muted">Pick a value to see it applied live. <strong>Default</strong> anchors full-width to the bottom; <strong>Pill</strong> floats as a centered rounded bar.</Lumeo.Text>
            <Segmented @bind-Value="_bottomNavVariantSel" Options="_bottomNavVariantOptions" />
            <Stack Class="h-[200px] w-full rounded-lg border border-border/40 bg-muted/30 relative overflow-hidden">
                <Flex Align="center" Justify="center" Class="flex-1 text-muted-foreground text-sm">App content area</Flex>
                <BottomNav Fixed="false" Variant="@_activeBottomNavVariant">
                    <BottomNavItem Href="#home" Label="Home" IsActive="true">
                        <IconContent><Icon Name="House" Size="Icon.IconSize.Sm" /></IconContent>
                    </BottomNavItem>
                    <BottomNavItem Href="#search" Label="Search">
                        <IconContent><Icon Name="Search" Size="Icon.IconSize.Sm" /></IconContent>
                    </BottomNavItem>
                    <BottomNavItem Href="#inbox" Label="Inbox">
                        <IconContent><Icon Name="Inbox" Size="Icon.IconSize.Sm" /></IconContent>
                    </BottomNavItem>
                    <BottomNavItem Href="#profile" Label="Profile">
                        <IconContent><Icon Name="User" Size="Icon.IconSize.Sm" /></IconContent>
                    </BottomNavItem>
                </BottomNav>
            </Stack>
        </Stack>
    </ComponentDemo>

    <!-- Pill variant -->
    <ComponentDemo Title="Floating Pill" Code="@_pillCode">
        <Stack Class="h-[220px] w-full rounded-lg border border-border/40 bg-muted/30 relative overflow-hidden">
            <Flex Align="center" Justify="center" Class="flex-1 text-muted-foreground text-sm">Elevated centered pill variant</Flex>
            <BottomNav Fixed="false" Variant="BottomNav.BottomNavVariant.Pill">
                <BottomNavItem Href="#home" Label="Home" IsActive="true">
                    <IconContent><Icon Name="House" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#search" Label="Search">
                    <IconContent><Icon Name="Search" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#inbox" Label="Inbox">
                    <IconContent><Icon Name="Inbox" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
                <BottomNavItem Href="#profile" Label="Profile">
                    <IconContent><Icon Name="User" Size="Icon.IconSize.Sm" /></IconContent>
                </BottomNavItem>
            </BottomNav>
        </Stack>
    </ComponentDemo>

    <!-- Sidebar ↔ BottomNav responsive pattern -->
    <div class="space-y-3">
        <Heading Id="responsive" Level="2" Class="scroll-mt-20">Responsive: Sidebar ↔ BottomNav</Heading>
        <Lumeo.Text Size="base" Color="muted" Leading="relaxed">
            The standard mobile pattern: show the full <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;Sidebar&gt;</code> on
            <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">md</code> and up, and a 4-item <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">&lt;BottomNav&gt;</code> below it.
            Pick the 4 most-used items — do <Lumeo.Text As="span" Weight="medium" Class="text-foreground">not</Lumeo.Text> mirror the full sidebar tree;
            bury the rest behind a "More" item or a Sheet.
        </Lumeo.Text>
        <Stack Class="code-block rounded-lg border border-border/40 bg-muted px-4 py-3 font-mono text-xs text-foreground whitespace-pre overflow-x-auto">@_responsiveCode</Stack>
        <Lumeo.Text Size="sm" Color="muted">
            Two simple rules: the Sidebar is <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">hidden md:flex</code>,
            the BottomNav is <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">md:hidden</code>.
            Add <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">pb-16 md:pb-0</code> to your scroll container so content
            isn't hidden behind the fixed bar on mobile.
        </Lumeo.Text>
    </div>

    <!-- API Reference -->
    <div class="space-y-3">
        <Heading Id="api" Level="2" Class="scroll-mt-20">API Reference</Heading>

        <Heading Level="3" Size="base" Class="pt-2">BottomNav</Heading>
        <div class="overflow-x-auto rounded-lg border border-border/40">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-muted-foreground">
                    <tr>
                        <th class="px-4 py-2 text-left font-medium">Prop</th>
                        <th class="px-4 py-2 text-left font-medium">Type</th>
                        <th class="px-4 py-2 text-left font-medium">Default</th>
                        <th class="px-4 py-2 text-left font-medium">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border">
                    <tr><td class="px-4 py-2 font-mono text-xs">ChildContent</td><td class="px-4 py-2 font-mono text-xs">RenderFragment?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">The <code class="font-mono text-xs">&lt;BottomNavItem&gt;</code> entries and optional <code class="font-mono text-xs">&lt;BottomNavFab&gt;</code>.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">Variant</td><td class="px-4 py-2 font-mono text-xs">BottomNavVariant</td><td class="px-4 py-2 font-mono text-xs">Default</td><td class="px-4 py-2 text-muted-foreground"><code class="font-mono text-xs">Default</code> solid bar with top border, or <code class="font-mono text-xs">Pill</code> floating centered pill.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">Fixed</td><td class="px-4 py-2 font-mono text-xs">bool</td><td class="px-4 py-2 font-mono text-xs">true</td><td class="px-4 py-2 text-muted-foreground">Pins to the viewport bottom via <code class="font-mono text-xs">position: fixed</code>. Set <code class="font-mono text-xs">false</code> to render inline (e.g. inside a demo frame).</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">AriaLabel</td><td class="px-4 py-2 font-mono text-xs">string</td><td class="px-4 py-2 font-mono text-xs">"Bottom navigation"</td><td class="px-4 py-2 text-muted-foreground">Accessible label for the <code class="font-mono text-xs">&lt;nav&gt;</code> landmark.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">Class</td><td class="px-4 py-2 font-mono text-xs">string?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Extra Tailwind classes on the root <code class="font-mono text-xs">&lt;nav&gt;</code>.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">AnimatedIndicator</td><td class="px-4 py-2 font-mono text-xs">bool</td><td class="px-4 py-2 font-mono text-xs">false</td><td class="px-4 py-2 text-muted-foreground">When true, each item gets smooth background-color and color transitions on role changes, and the active pill transitions its transform with a spring easing.</td></tr>
                </tbody>
            </table>
        </div>

        <Heading Level="3" Size="base" Class="pt-4">BottomNavItem</Heading>
        <div class="overflow-x-auto rounded-lg border border-border/40">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-muted-foreground">
                    <tr>
                        <th class="px-4 py-2 text-left font-medium">Prop</th>
                        <th class="px-4 py-2 text-left font-medium">Type</th>
                        <th class="px-4 py-2 text-left font-medium">Default</th>
                        <th class="px-4 py-2 text-left font-medium">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border">
                    <tr><td class="px-4 py-2 font-mono text-xs">Href</td><td class="px-4 py-2 font-mono text-xs">string?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Destination URL. When set, renders as <code class="font-mono text-xs">&lt;a&gt;</code>; otherwise <code class="font-mono text-xs">&lt;button&gt;</code>.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">Label</td><td class="px-4 py-2 font-mono text-xs">string?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Text shown under the icon and used as <code class="font-mono text-xs">aria-label</code>.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">IconContent</td><td class="px-4 py-2 font-mono text-xs">RenderFragment?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Icon slot. Use <code class="font-mono text-xs">&lt;Icon Name="..." /&gt;</code> or any Blazicon.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">Badge</td><td class="px-4 py-2 font-mono text-xs">RenderFragment?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Optional badge rendered on the icon — pass a count, dot, or arbitrary markup.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">IsActive</td><td class="px-4 py-2 font-mono text-xs">bool?</td><td class="px-4 py-2 font-mono text-xs">null</td><td class="px-4 py-2 text-muted-foreground">Manual override. When <code class="font-mono text-xs">null</code>, active state is inferred from the current URL matching <code class="font-mono text-xs">Href</code>.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">OnClick</td><td class="px-4 py-2 font-mono text-xs">EventCallback</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Fires for both link and button renderings. Navigation still proceeds for <code class="font-mono text-xs">Href</code>.</td></tr>
                                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">PressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Button.ButtonPressEffect</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">None</td>
                            <td class="p-3 text-muted-foreground">Press feedback animation. Values: None, Scale, Brightness, Ripple.</td>
                        </tr>
</tbody>
            </table>
        </div>

        <Heading Level="3" Size="base" Class="pt-4">BottomNavFab</Heading>
        <div class="overflow-x-auto rounded-lg border border-border/40">
            <table class="w-full text-sm">
                <thead class="bg-muted/50 text-muted-foreground">
                    <tr>
                        <th class="px-4 py-2 text-left font-medium">Prop</th>
                        <th class="px-4 py-2 text-left font-medium">Type</th>
                        <th class="px-4 py-2 text-left font-medium">Default</th>
                        <th class="px-4 py-2 text-left font-medium">Description</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-border">
                    <tr><td class="px-4 py-2 font-mono text-xs">AriaLabel</td><td class="px-4 py-2 font-mono text-xs">string</td><td class="px-4 py-2 font-mono text-xs">"Primary action"</td><td class="px-4 py-2 text-muted-foreground">Required accessible name — FABs are usually icon-only.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">Href</td><td class="px-4 py-2 font-mono text-xs">string?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Optional link destination; otherwise renders as <code class="font-mono text-xs">&lt;button&gt;</code>.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">OnClick</td><td class="px-4 py-2 font-mono text-xs">EventCallback</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Click handler.</td></tr>
                    <tr><td class="px-4 py-2 font-mono text-xs">ChildContent</td><td class="px-4 py-2 font-mono text-xs">RenderFragment?</td><td class="px-4 py-2 font-mono text-xs">—</td><td class="px-4 py-2 text-muted-foreground">Button content — usually an <code class="font-mono text-xs">&lt;Icon&gt;</code>.</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Related -->
    <div class="space-y-3">
        <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
        <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
            <li><Lumeo.Link Href="components/sidebar" Class="text-primary hover:underline">Sidebar</Lumeo.Link> — Use on desktop in the responsive pair</li>
            <li><Lumeo.Link Href="components/tabs" Class="text-primary hover:underline">Tabs</Lumeo.Link> — For switching views within a page (not top-level nav)</li>
            <li><Lumeo.Link Href="components/speed-dial" Class="text-primary hover:underline">Speed Dial</Lumeo.Link> — Alternative quick-action surface</li>
            <li><Lumeo.Link Href="components/sheet" Class="text-primary hover:underline">Sheet</Lumeo.Link> — Bottom sheet for "More" destinations that don't fit in 4 tabs</li>
        </ul>
    </div>

</Stack>

@code {
    private string _activeTab = "home";

    // Interactive: Variant
    private string _bottomNavVariantSel = "Default";
    private BottomNav.BottomNavVariant _activeBottomNavVariant => Enum.Parse<BottomNav.BottomNavVariant>(_bottomNavVariantSel);
    private List<Segmented.SegmentedOption> _bottomNavVariantOptions = new()
    {
        new() { Label = "Default", Value = "Default" },
        new() { Label = "Pill", Value = "Pill" },
    };
    private string _variantInteractiveCode = @"<Segmented @bind-Value=""_variantSel"" Options=""_variantOptions"" />
<BottomNav Fixed=""false"" Variant=""@_activeBottomNavVariant"">
    <BottomNavItem Href=""#home"" Label=""Home"" IsActive=""true"">
        <IconContent><Icon Name=""House"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""#search"" Label=""Search"">
        <IconContent><Icon Name=""Search"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""#inbox"" Label=""Inbox"">
        <IconContent><Icon Name=""Inbox"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""#profile"" Label=""Profile"">
        <IconContent><Icon Name=""User"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
</BottomNav>

@code {
    private string _variantSel = ""Default"";
    private BottomNav.BottomNavVariant _activeBottomNavVariant =>
        Enum.Parse<BottomNav.BottomNavVariant>(_variantSel);
    private List<Segmented.SegmentedOption> _variantOptions = new()
    {
        new() { Label = ""Default"", Value = ""Default"" },
        new() { Label = ""Pill"", Value = ""Pill"" },
    };
}";

    private void HandleCreate() { /* demo */ }

    private string _basicCode = @"<BottomNav>
    <BottomNavItem Href=""/"" Label=""Home"">
        <IconContent><Icon Name=""House"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""/search"" Label=""Search"">
        <IconContent><Icon Name=""Search"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""/inbox"" Label=""Inbox"">
        <IconContent><Icon Name=""Inbox"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""/profile"" Label=""Profile"">
        <IconContent><Icon Name=""User"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
</BottomNav>";

    private string _badgeCode = @"<BottomNavItem Href=""/chat"" Label=""Chat"">
    <IconContent><Icon Name=""MessageCircle"" Size=""Icon.IconSize.Sm"" /></IconContent>
    <Badge>3</Badge>
</BottomNavItem>";

    private string _fabCode = @"<BottomNav>
    <BottomNavItem Href=""/"" Label=""Home"" />
    <BottomNavItem Href=""/search"" Label=""Search"" />

    <BottomNavFab AriaLabel=""Create"" OnClick=""HandleCreate"">
        <Icon Name=""Plus"" Size=""Icon.IconSize.Md"" />
    </BottomNavFab>

    <BottomNavItem Href=""/inbox"" Label=""Inbox"" />
    <BottomNavItem Href=""/profile"" Label=""Profile"" />
</BottomNav>";

    private string _pillCode = @"<BottomNav Variant=""BottomNav.BottomNavVariant.Pill"">
    <BottomNavItem Href=""/"" Label=""Home"" />
    <BottomNavItem Href=""/search"" Label=""Search"" />
    <BottomNavItem Href=""/inbox"" Label=""Inbox"" />
    <BottomNavItem Href=""/profile"" Label=""Profile"" />
</BottomNav>";

    private string _animatedCode = @"<BottomNav AnimatedIndicator=""true"">
    <BottomNavItem Href=""/"" Label=""Home"" />
    <BottomNavItem Href=""/search"" Label=""Search"" />
    <BottomNavItem Href=""/inbox"" Label=""Inbox"" />
    <BottomNavItem Href=""/profile"" Label=""Profile"" />
</BottomNav>";

    private string _responsiveCode = @"<!-- MainLayout.razor -->

<div class=""min-h-screen flex"">

    <!-- Sidebar: visible on md and up -->
    <SidebarProvider Class=""hidden md:flex"">
        <SidebarComponent>
            <SidebarHeader>Acme Inc</SidebarHeader>
            <SidebarContent>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton Href=""/"" IsActive=""@true"">
                            <IconContent><Icon Name=""House"" Size=""Icon.IconSize.Sm"" /></IconContent>
                            <LabelContent>Home</LabelContent>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                    <!-- …full sidebar tree… -->
                </SidebarMenu>
            </SidebarContent>
        </SidebarComponent>
    </SidebarProvider>

    <!-- Main content: reserve space at the bottom on mobile -->
    <main class=""flex-1 pb-16 md:pb-0"">
        @Body
    </main>

</div>

<!-- BottomNav: visible below md. Pick the 4 most-used items only. -->
<BottomNav Class=""md:hidden"">
    <BottomNavItem Href=""/"" Label=""Home"">
        <IconContent><Icon Name=""House"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""/search"" Label=""Search"">
        <IconContent><Icon Name=""Search"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
    <BottomNavItem Href=""/inbox"" Label=""Inbox"">
        <IconContent><Icon Name=""Inbox"" Size=""Icon.IconSize.Sm"" /></IconContent>
        <Badge>3</Badge>
    </BottomNavItem>
    <BottomNavItem Href=""/profile"" Label=""Profile"">
        <IconContent><Icon Name=""User"" Size=""Icon.IconSize.Sm"" /></IconContent>
    </BottomNavItem>
</BottomNav>";
}
