Drawer Component

Drawer Component

Axiom01's drawer component (also known as a sidebar or off-canvas menu) provides a hidden panel that slides in from the edge of the screen. It's commonly used for navigation, settings, or supplementary content.

Example Drawer

Code Example

<button class="button primary" id="openDrawer">Open Drawer</button>

<div class="drawer" id="myDrawer">
<div class="drawer-header">
    <h3>Drawer Title</h3>
    <button class="button secondary small" id="closeDrawer">Close</button>
</div>
<div class="drawer-content">
    <p>This is the content of the drawer.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>
</div>
<div class="drawer-backdrop" id="drawerBackdrop"></div>

<script>
const openDrawerBtn = document.getElementById('openDrawer');
const closeDrawerBtn = document.getElementById('closeDrawer');
const myDrawer = document.getElementById('myDrawer');
const drawerBackdrop = document.getElementById('drawerBackdrop');

openDrawerBtn.addEventListener('click', () => {
    myDrawer.classList.add('is-open');
    drawerBackdrop.classList.add('is-open');
});

closeDrawerBtn.addEventListener('click', () => {
    myDrawer.classList.remove('is-open');
    drawerBackdrop.classList.remove('is-open');
});

drawerBackdrop.addEventListener('click', () => {
    myDrawer.classList.remove('is-open');
    drawerBackdrop.classList.remove('is-open');
});
</script>

Usage Guidelines

The .drawer class defines the hidden panel. The .is-open class is toggled via JavaScript to show/hide the drawer. A .drawer-backdrop is typically used to overlay the main content when the drawer is open, providing a visual cue and preventing interaction with the background.

You will need custom JavaScript to handle the opening and closing logic, including toggling the is-open class on both the drawer and its backdrop.