lucasayb/drawer

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Radu1749 💻

rayra-alencar 💻

Renan Guerra 💻

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!