# Drawer

Source: https://iriscss.com/documentation/components/drawer/

A [modal](https://iriscss.com/documentation/components/modal/index.html.md) that slides in from an edge of the screen.

Add `.drawer` to the `dialog`. It slides in from the end edge and opens like any modal.

```html
<button commandfor="drawer-end" command="show-modal">Open drawer</button>
<dialog id="drawer-end" class="drawer" aria-labelledby="drawer-end-title">
  <header>
    <button class="close" commandfor="drawer-end" command="close" aria-label="Close"></button>
    <h3 id="drawer-end-title">Filters</h3>
  </header>
  <label><input type="checkbox" checked> In stock</label>
  <label><input type="checkbox"> On sale</label>
</dialog>
```

## Start

`.start` uses the start edge, for a side menu.

```html
<button commandfor="drawer-start" command="show-modal">Open menu</button>
<dialog id="drawer-start" class="drawer start" aria-label="Menu">
  <button class="close" commandfor="drawer-start" command="close" aria-label="Close"></button>
  <aside>
    <nav aria-label="Drawer menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Settings</a></li>
      </ul>
    </nav>
  </aside>
</dialog>
```

## Bottom sheet

`.bottom` slides up from the bottom with rounded top corners.

```html
<button commandfor="drawer-bottom" command="show-modal">Share</button>
<dialog id="drawer-bottom" class="drawer bottom" aria-label="Share">
  <p>Share this page</p>
  <menu>
    <li><button class="small">Copy link</button></li>
    <li><button class="small" commandfor="drawer-bottom" command="close">Cancel</button></li>
  </menu>
</dialog>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-drawer-width` | `20rem` |  |
| `--i-drawer-max-height` | `80dvh` | Tallest a bottom sheet gets |