# `LineaUI.Components.Drawer`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/drawer.ex#L1)

LineOne's drawer: a full-height panel that slides in from the left or the right over a dark
backdrop.

    <.button phx-click={LineaUI.toggle("menu")}>Menu</.button>

    <.drawer id="menu" side="right">
      <nav class="p-5">…</nav>
    </.drawer>

Like the modal it opens from the browser (`LineaUI.open/close/toggle("id")`), from the server
(`LineaUI.open(socket, "id")`) or from `open`; `on_close` runs however it closed (Esc, the
backdrop, a command), so the server can follow. A drawer does not lock the page's scroll,
as in LineOne.

# `drawer`

Renders a drawer, closed unless `open`.

Events: `on_open` and `on_close` push `%{"id" => id}` when they are event names.

## Attributes

* `id` (`:string`) (required)
* `open` (`:boolean`) - Defaults to `false`.
* `side` (`:string`) - Defaults to `"left"`. Must be one of `"left"`, or `"right"`.
* `overlay` (`:boolean`) - The dark backdrop, which closes the drawer when clicked. Defaults to `true`.
* `prevent_close` (`:boolean`) - Esc and the backdrop do not close it. Defaults to `false`.
* `on_open` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `on_close` (`:any`) - An event name or a `%JS{}`. Defaults to `nil`.
* `target` (`:any`) - The `phx-target` of `on_open` / `on_close` events. Defaults to `nil`.
* `class` (`:any`) - Merged into the sliding frame: its width (`w-72` by default, e.g. `class="w-96"`) and shadow. Defaults to `nil`.
* `panel_class` (`:any`) - Merged into the white panel inside the frame. Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*