Drawer is a useful UI element to show some content on top of the page.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit delectus quae autem ducimus neque. Pariatur numquam iure aspernatur aliquid sit. Eos eveniet delectus dicta consectetur quaerat molestiae maiores, neque culpa.
<button class="button" id="js-open-drawer">Click me to open drawer</button>
<div class="drawer-container" id="js-drawer">
<div class="drawer">
<div class="drawer-header">
Drawer header
<span class="drawer-sub-header">Sub header text here if needed</span>
<button class="drawer-close js-drawer-close"><i class="iconoir-xmark"></i></button>
</div>
<div class="drawer-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit delectus quae autem ducimus
neque. Pariatur numquam iure aspernatur aliquid sit. Eos eveniet delectus dicta consectetur
quaerat molestiae maiores, neque culpa.
</p>
</div>
<div class="drawer-footer drawer-footer-right">
<button class="button button-outline js-drawer-close">Close</button>
<button class="button button-primary js-drawer-close">Okay</button>
</div>
</div>
</div>const drawerTriggerElement = document.getElementById('js-open-drawer');
const drawerElement = document.getElementById('js-drawer');
drawerTriggerElement.addEventListener('click', () => {
drawerElement.classList.toggle('open');
});
drawerElement.addEventListener('click', (event) => {
if (event.target.classList.contains('js-drawer-close')) {
drawerElement.classList.remove('open');
}
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
drawerElement.classList.remove('open');
}
});--r-drawer-container-background: var(--r-modal-background);
--r-drawer-background: var(--r-modal-content-background);
--r-drawer-close-button-color: var(--r-modal-close-color);
--r-drawer-border-radius: var(--r-modal-content-radius);
--r-drawer-content-spacing: var(--r-modal-content-spacing);
--r-drawer-border-color: var(--r-modal-border-color);