Drawer

<Button variant="outlined" onclick={() => (leftOpen = true)}>Left</Button>
<Button variant="outlined" onclick={() => (rightOpen = true)}>Right</Button>
<Button variant="outlined" onclick={() => (topOpen = true)}>Top</Button>
<Button variant="outlined" onclick={() => (bottomOpen = true)}>Bottom</Button>

<Drawer bind:open={leftOpen} title="Left Drawer" placement="left">
  <p>This drawer slides in from the left edge.</p>
</Drawer>
<Drawer bind:open={rightOpen} title="Right Drawer" placement="right">
  <p>This drawer slides in from the right edge.</p>
</Drawer>
<Drawer bind:open={topOpen} title="Top Drawer" placement="top">
  <p>This drawer slides in from the top edge.</p>
</Drawer>
<Drawer bind:open={bottomOpen} title="Bottom Drawer" placement="bottom">
  <p>This drawer slides in from the bottom edge.</p>
</Drawer>

<Button onclick={() => (footerOpen = true)}>Open with Footer</Button>
<Drawer bind:open={footerOpen} title="Confirm Changes">
  <p>Are you sure you want to apply these changes? This action cannot be undone.</p>
  {#snippet footer()}
    <Button variant="ghost" onclick={() => (footerOpen = false)}>Cancel</Button>
    <Button intent="primary" onclick={() => (footerOpen = false)}>Confirm</Button>
  {/snippet}
</Drawer>

<Button onclick={() => (settingsOpen = true)}>Open Settings</Button>
<Drawer bind:open={settingsOpen} title="Settings" placement="right" size="sm">
  <div class="space-y-4">
    <Input label="Display name" placeholder="Your name" />
    <Input label="Email" placeholder="name@example.com" type="email" />
    <Separator />
    <Toggle label="Email notifications" checked />
    <Toggle label="Dark mode" />
    <Toggle label="Analytics" checked />
  </div>
  {#snippet footer()}
    <Button variant="ghost" onclick={() => (settingsOpen = false)}>Cancel</Button>
    <Button intent="primary" onclick={() => (settingsOpen = false)}>Save</Button>
  {/snippet}
</Drawer>

<Button onclick={() => (navOpen = true)}>Open Menu</Button>
<Drawer bind:open={navOpen} title="Menu" placement="left" size="sm">
  <nav class="flex flex-col gap-1">
    {#each ['Dashboard', 'Projects', 'Team', 'Settings', 'Help'] as item (item)}
      <button
        class="text-text-primary hover:bg-surface-hover rounded-modify px-3 py-2.5 text-left text-sm transition-colors"
        onclick={() => (navOpen = false)}
      >
        {item}
      </button>
    {/each}
  </nav>
</Drawer>

<Drawer
  bind:open
  title="Filters"
  placement="right"
  slotClasses={{
    backdrop: 'backdrop-blur-none bg-black/30',
    panel: 'rounded-none border-l-2 border-border-default',
    body: 'px-8'
  }}
>
  …
</Drawer>