Drawer

@using System.ComponentModel.DataAnnotations

<Row Gap="3" Wrap Align="Align.Center">
    <DialogTrigger For="order-filters" StartIcon="Lucide.SlidersHorizontal" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Filters</DialogTrigger>
    <TextBlock As="span" Size="TextSize.Sm" Color="Color.Muted">@_summary</TextBlock>
</Row>

<Drawer Id="order-filters" Title="Filters" Size="DialogSize.Sm" @bind-Open="_open">
    <Form Model="Model" FormName="order-filters" OnValidSubmit="Apply">
        @* DialogBody fills the drawer's height, so the footer after it sits at the bottom. *@
        <DialogBody Gap="5">
            <RadioGroup @bind-Value="Model!.Status" />
            <Checkbox @bind-Value="Model!.PaidOnly" />
            <Checkbox @bind-Value="Model!.Archived" />
        </DialogBody>
        @* Last in the form, the button is the drawer's footer and still submits it. Choices stay in
           the drawer until it's pressed; the close button leaves the shown orders as they are. *@
        <FormActions>
            <Button Submit>Show orders</Button>
        </FormActions>
    </Form>
</Drawer>

@code {
    [SupplyParameterFromForm(FormName = "order-filters")]
    private OrderFilters? Model { get; set; }

    private bool _open;
    private string _summary = "Showing all orders";

    protected override void OnInitialized() => Model ??= new();

    private void Apply()
    {
        var status = Model!.Status == OrderStatus.Any ? "all" : Model.Status.ToString().ToLowerInvariant();
        _summary = $"Showing {status} orders" + (Model.PaidOnly ? ", paid only" : "") + (Model.Archived ? ", archived too" : "");
        // On an interactive page C# closes the drawer; a post on a static page closes it anyway.
        _open = false;
    }

    public sealed class OrderFilters
    {
        public OrderStatus Status { get; set; }

        [Display(Name = "Paid orders only")]
        public bool PaidOnly { get; set; }

        [Display(Name = "Include archived orders")]
        public bool Archived { get; set; }
    }

    public enum OrderStatus { [Display(Name = "Any status")] Any, Pending, Shipped, Delivered }
}

<Row Gap="3" Wrap Justify="Justify.Center">
    <DialogTrigger For="order-details" Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.PanelRight">End</DialogTrigger>
    <DialogTrigger For="order-history" Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.PanelRight">End, large</DialogTrigger>
    <DialogTrigger For="order-share" Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.PanelBottom">Bottom</DialogTrigger>
</Row>

@* The default: the end edge, Size Md (24rem). *@
<Drawer Id="order-details" Title="Order #1042">
    <TextBlock>Two items, paid by card, shipping to London.</TextBlock>
</Drawer>

@* Lg, 32rem: room for a table or a longer form. On phones every size stops 3rem short of the
   screen's width. *@
<Drawer Id="order-history" Title="Order history" Size="DialogSize.Lg">
    <DescriptionList>
        <DescriptionItem Term="Oct 20">Placed, two items</DescriptionItem>
        <DescriptionItem Term="Oct 21">Paid by card ending 4242</DescriptionItem>
        <DescriptionItem Term="Oct 22">Shipped from Leeds</DescriptionItem>
    </DescriptionList>
</Drawer>

@* A sheet along the bottom, as tall as its content: suits phones. *@
<Drawer Id="order-share" Title="Share this order" Placement="DialogPlacement.Bottom">
    <TextBlock>Anyone with the link can see the order's items and status.</TextBlock>
</Drawer>

<DialogTrigger For="site-menu" StartIcon="Lucide.PanelLeft" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Menu</DialogTrigger>

<Drawer Id="site-menu" Title="IzzyBlazor" Placement="DialogPlacement.Start" Size="DialogSize.Sm">
    <nav aria-label="Main">
        <NavMenu>
            <NavItem Href="docs" Icon="Lucide.BookOpen">Docs</NavItem>
            <NavItem Href="docs/components" Icon="Lucide.Blocks">Components</NavItem>
            <NavItem Href="demos" Icon="Lucide.LayoutDashboard">Demos</NavItem>
        </NavMenu>
    </nav>
</Drawer>