Drawer JS
The drawer component make you able to toggle a drawer with a button and resize window.
scss
@use '@natachah/vanilla-frontend/scss/components/drawer';Syntax
You can use the classes .drawer, .drawer-button and the id #backdrop to quickly design the drawer with some nice animations.
My awsome drawer !
html
<div id="backdrop"></div>
<button class="drawer-button" aria-expanded="false" aria-pressed="false" aria-controls="drawer" aria-label="Toggle the drawer">
Menu
</button>
<div id="drawer" class="drawer" hidden>
My awsome drawer !
</div>css
--drawer-display
--drawer-background
--drawer-index
--drawer-position
--drawer-width
--drawer-height
--drawer-max-width
--drawer-max-height
--drawer-origin
--drawer-animation
--drawer-transform
--drawer-backdrop-color
--drawer-backdrop-filter
--svg-line-sizejs
import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
const drawer = document.getElementById('drawer')
if (drawer) new Drawer(drawer, { breakpoint : 960, cookie: 'name-of-my-cookie' })The #backdrop must be a child of the <body> !
And the default CSS breakpoint to view the backdrop is 960px.
Javascript
This component is mostly in javascript, to use it you must import the javascript file and create a new Drawer object.
You can have a Backdrop if you want to make it more like a drawer opening on the front of the content, you juste need a #backdrop somewhere on your page.
Options
| Name | Description | Value |
|---|---|---|
| breakpoint | The breakpoint to open/close the drawer | 960 as an int |
| cookie | The cookie name to save if you want to keep it open/close on refresh | false by default, or a string |
| trap.exclusions | The elements that should not be inert for Accessibility | ['#backdrop'] by default, or an Array |
| trap.inclusions | The elements to include into the TAB trap focus | null by default, or an Array |
js
// E.G. basic opening
import Drawer from '@natachah/vanilla-frontend/js/utilities/_drawer.js'
const drawer = document.getElementById('drawer')
if (drawer) new Drawer(drawer, {
breakpoint : 960,
cookie: '_drawer-cookie',
trap: {
exclusions: ['#backdrop', '#toggleMenu'],
inclusions: ['#toggleMenu']
}
})TIP
If your website use the Comfort JS component, you should use the same cookie name for both as it will combine the values.