> For the complete documentation index, see [llms.txt](https://pocketblocks.pedroza.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pocketblocks.pedroza.dev/build-apps/component-guides/drawer.md).

# Drawer

In PocketBlocks, **Drawer** is an overlay sidebar to display information or perform operations, without interrupting the workflow on the main window.

The following example builds a shopping cart using a drawer.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-44b6735b27a655318d844b4cbee727c44bd09cb3%2F01.gif?alt=media" alt=""><figcaption></figcaption></figure>

## Layout

When inserted by drag-and-drop operation, a **Drawer** floats on the right side (by default) of the main window. Then, you can add components onto the **Drawer** according to your needs. In the editing mode of a **Drawer**, other components on the canvas are not editable.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-9c2897af1112decde715ae9966ab0ad30c456c2a%2F02.png?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When a drawer is closed, you can re-open it by clicking the corresponding label in the **Modals** tab in the left pane.
{% endhint %}

### Position

In the **Properties** tab, you can set the position of the drawer. The default position is the right side of the main window.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-60c86dbce46602c951a86dffb6a00f4ff97d9412%2F03.png?alt=media" alt=""><figcaption></figcaption></figure>

### Resize

In **Properties** tab, you can set the width of the drawer by pixels or percentage. Note that the height of a drawer is the same as the main window and is not customizable.

<figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-8c2defeb4c6b8f0fc8fbd6be1a6a0c4f950c3e07%2F04.png?alt=media" alt=""><figcaption></figcaption></figure>

## Events

You can reference a drawer in JS code anywhere in your app or call it through a "control component" action in **Properties** > **Interaction** > **Event handlers**.

The following sections guide you through how to open and close a drawer by clicking a button in an online shopping app.

### Trigger openDrawer

Usually, in an app, you trigger opening a drawer by an event such as clicking a button. For example, opening a drawer to display the shopping cart is implemented in the following steps.

1. Add a button and rename it as `gotoCart`.
2. Set the event handler of the button. Select "Control component" as the **Action** and select the component "cart" and method "openDrawer". All these settings are auto-saved.

   <figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-7821071c8dfc0d19ff1872edf12e3c9d4a810c85%2F05.png?alt=media" alt=""><figcaption></figcaption></figure>
3. Click the button `gotoCart` and the binded drawer "cart" is open.

### Trigger closeDrawer

Triggerring "closeDrawer" is similar to triggering "openDrawer". When setting up the event handler, select the method "closeDrawer". For example, closing a drawer that displays the shopping cart is implemented in the following steps.

1. Add a button and rename it as `gobackShopping`.
2. Set the event handler of the button. Select "Control component" as the **Action** and select the component "cart" and method "closeDrawer". All these settings are auto-saved.

   <figure><img src="https://3954266794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdzgVkwpxTMW0dI30zZ8Y%2Fuploads%2Fgit-blob-4f602ff0373e1773e634a0c6eddadccd5ed27fc7%2F06.png?alt=media" alt=""><figcaption></figcaption></figure>
3. Click the "Continue Shopping" button and the binded drawer "cart" is closed.