๐ข Use this project, contribute to it or open issues to help evolve it using Store Discussion.
This component allows you to have a sliding drawer for your menus. This is specially handy for mobile layouts.
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>
)
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 |
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 |
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!