Drawer Component

Positions

<Drawer @bind-IsOpen="_open" Position="right" Size="md" Title="Right drawer">
    <Body>...</Body>
</Drawer>

<Drawer @bind-IsOpen="_open" Position="left"   Size="md" Title="Left drawer" />
<Drawer @bind-IsOpen="_open" Position="bottom" Size="md" Title="Bottom drawer" />

Sizes (right position)

@* sm 320px · md 480px · lg 640px · xl 800px · full 100vw *@
<Drawer @bind-IsOpen="_open" Position="right" Size="sm" Title="Small drawer" />
<Drawer @bind-IsOpen="_open" Position="right" Size="lg" Title="Large drawer" />

Master/detail — click a row to view detail

<Drawer @bind-IsOpen="_patientOpen"
        Position="right"
        Size="lg"
        Title="@(_currentPatient?.Name ?? "")"
        Description="@(_currentPatient is null ? null : $"MRN {_currentPatient.Mrn}")">
    <Body>
        @if (_currentPatient is not null)
        {
            <div class="layout-detail-card">
                <span>Status</span>      <span>@_currentPatient.Status</span>
                <span>Date of birth</span> <span>@_currentPatient.Dob.ToString("MMM d, yyyy")</span>
                @* ... *@
            </div>
        }
    </Body>
    <Footer>
        <Button Variant="tertiary" OnClick="@(() => _patientOpen = false)">Close</Button>
        <Button Variant="primary">Edit patient</Button>
    </Footer>
</Drawer>