Store Drawer

This component allows you to have a sliding drawer for your menus. This is specially handy for mobile layouts.

Configuration

Add the app to your theme's dependencies on the manifest.json, for example:

"dependencies": {
  "vtex.store-drawer": "0.x"
}

Then, you need to add the drawer block into your app. The following is an example taken from Store Theme.

"drawer": {
  "children": [
    "menu#drawer"
  ]
},

"menu#drawer": {
  "children": [
    "menu-item#category-clothing",
    "menu-item#category-decoration",
    "menu-item#custom-sale"
  ],
  "props": {
    "orientation": "vertical"
  }
},

There is also a block that can be used for customizing the icon that triggers the opening of the drawer, it's called "drawer-trigger" and can be used as follows:

"drawer": {
  "children": [
    "menu#drawer"
  ],
  "blocks": ["drawer-trigger"]
},

"drawer-trigger": {
  "children": ["rich-text#open-drawer"]
},

"rich-text#open-drawer": {
  "props": {
    "text": "Open drawer"
  }
}

"menu#drawer": {
  "children": [
    "menu-item#category-clothing",
    "menu-item#category-decoration",
    "menu-item#custom-sale"
  ],
  "props": {
    "orientation": "vertical"
  }
},

And there is a block that enables customization of the header that contains the button which closes the drawer. It's called "drawer-header" and can be used in a similar way as "drawer-trigger", here is an example:

// inside blocks.json
{
  "drawer": {
    "blocks": ["drawer-header#my-drawer"]
  },
  "drawer-header#my-drawer": {
    "children": [
      // you need to include the block `drawer-close-button` somewhere inside here
      "flex-layout.row#something",
      // ...
      "drawer-close-button"
    ]
  }
}

If you're using this component by itself, you just need to import it inside the component you want to use it in. Here's an example:

import { Drawer, DrawerHeader, DrawerCloseButton } from "vtex.store-drawer";

const Menu = () => (
  <Drawer
    header={
      <DrawerHeader>
        <DrawerCloseButton />
      </DrawerHeader>
    }
  >
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li>
    </ul>
  </Drawer>
);

Configuration

The drawer block accepts a few props that allow you to customize it.

Prop name	Type	Description	Default value
`maxWidth`	`number` or `string`	Define the open Drawer's maximum width.	`450`
`isFullWidth`	`Boolean`	Control whether or not the open Drawer should occupy the full available width.	`false`
`slideDirection`	`'horizontal'`\|`'vertical'`\|`'rightToLeft'`\|`'leftToRight'`	Controls the opening animation's direction.	`'horizontal'`
`backdropMode`	`'default'`\|`'none'`	Controls if it should display the backdrop when the Drawer is open
`renderingStrategy`	`'lazy'`\|`'eager'`	Controls if it should render the children only when clicked (`lazy`) or as soon as the page loads (`eager`). Enabling the `eager` strategy may increase SEO performance, but the page may be rendered slower	`'lazy'`
`customPixelEventId`	`string`	Store event ID responsible for triggering the `drawer` to automatically open itself on the interface.	`undefined`
`customPixelEventName`	`string`	Store event name responsible for triggering the `drawer` to automatically open itself on the interface. Some examples are: `'addToCart'` and `'removeFromCart'` events. Notice that using this prop will make the drawer open in every event with the specified name if no `customPixelEventId` is specified.	`undefined`

The drawer-close-button block accepts the following props to customize it:

Prop name	Type	Description	Default value
`size`	`Number`	Define the size of the icon inside the button	`30`
`type`	`'filled'`\|`'line'`	Define the type of the icon	`'line'`
`text`	`String`	Define the text inside the button. If `text` is defined, the icon will not be rendered.	`undefined`

The drawer-trigger block accepts the following prop to customize it:

Prop name	Type	Description	Default value
`customPixelEventId`	`string`	Defines the event ID to be sent whenever users interact with the Drawer component.	`undefined`

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`drawer`
`opened`
`overlay`
`overlay--visible`
`closed`
`moving`
`drawerContent`
`drawerHeader`
`drawerTriggerContainer`
`openIconContainer`
`closeIconContainer`
`closeIconButton`
`childrenContainer`