Drawer

shellui add drawer

<Button OnClick="() => isOpen = true">Open Drawer</Button>

<Drawer IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)" Title="Drawer Title" Description="Swipe down to close.">
  <p>Drawer content goes here.</p>
</Drawer>

@code {
    private bool isOpen = false;
}

<Drawer IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)" Side="DrawerSide.Bottom" Title="Options">
  <div class="space-y-2">
    <Button Variant="ButtonVariant.Outline" Class="w-full">Share</Button>
    <Button Variant="ButtonVariant.Outline" Class="w-full">Export</Button>
    <Button Variant="ButtonVariant.Destructive" Class="w-full">Delete</Button>
  </div>
</Drawer>

<Drawer IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)" Side="DrawerSide.Top" Title="Search">
  <Input Placeholder="Search..." />
</Drawer>

<Drawer IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)" Side="DrawerSide.Left" Title="Menu">
  <nav class="space-y-2">
    <a href="/" class="block py-2">Home</a>
    <a href="/about" class="block py-2">About</a>
    <a href="/contact" class="block py-2">Contact</a>
  </nav>
</Drawer>

<Button OnClick="() => isOpen = true">Actions</Button>

<Drawer IsOpen="@isOpen" IsOpenChanged="@((v) => isOpen = v)" Title="Actions" Description="Choose an action below.">
  <div class="grid gap-2 py-4">
    <Button Variant="ButtonVariant.Ghost" Class="justify-start" OnClick="HandleEdit">Edit Item</Button>
    <Button Variant="ButtonVariant.Ghost" Class="justify-start" OnClick="HandleDuplicate">Duplicate</Button>
    <Separator />
    <Button Variant="ButtonVariant.Ghost" Class="justify-start text-destructive" OnClick="HandleDelete">Delete</Button>
  </div>
</Drawer>

@code {
    private bool isOpen = false;
    private void HandleEdit() => isOpen = false;
    private void HandleDuplicate() => isOpen = false;
    private void HandleDelete() => isOpen = false;
}