# Drawer
In QuickDEV, **Drawer** serves as an overlay sidebar designed to display information or execute operations without disrupting the workflow on the main window.
The following example builds a shopping cart using a drawer.
## Layout
When inserted via a drag-and-drop operation, a **Drawer** automatically floats on the right side (by default) of the main window. Subsequently, you can add components onto the **Drawer** as per your requirements. During the editing mode of a **Drawer**, other components on the canvas are not editable.
{% hint style="info" %}
After closing a drawer, you can reopen it by selecting the matching label from the Modals menu in the left pane.
{% endhint %}
## Position
Within the **Properties** tab, you have the option to set the position of the drawer. By default, the drawer is positioned on the right side of the main window.
## Resize
In the **Properties** tab, you can adjust the width of the drawer either by pixels or percentage. However, it's important to note that the height of a drawer remains the same as the main window and is not customizable.
## Events
You have the flexibility to reference a drawer within your JavaScript code from any part of your application, or you can invoke it through a "control component" action available in **Properties > Interaction >** [**Event handlers**](https://docs.quickdev.cloud/applications/actions-editor/event-handlers).
The subsequent sections provide guidance on opening and closing a drawer by clicking a button in an online shopping application.
### Trigger openDrawer
Typically, in an application, you initiate the opening of a drawer by triggering an event such as clicking a button.\
To implement the opening of a drawer to display the shopping cart, you can follow these steps:
1. Add a button and modify its name to `openCartDrawer`
2. Set up the event handler for the button. Choose "**Control component**" as the **Action,** then choose the component cart and **openDrawer** method. All modifications will be saved automatically
3. When you click the `openCartDrawer` button, the associated drawer named **cart** opens
### Trigger closeDrawer
Initiating the **closeDrawer** action follows a process similar to triggering **openDrawer**. When configuring the event handler, choose the **closeDrawer** method.\
Implementing the closure of a drawer that displays the shopping cart can be accomplished through the following steps:
1. Insert a button and rename it to `closeCartDrawer`.
2. Configure the event handler for the button. Choose "**Control component**" as the **Action** and select the component cart and method **closeDrawer**. All modifications will be automatically saved.
3. Upon clicking the `closeCartDrawer` button, the associated drawer named **cart** will open.
