Drawer

Fixed slide-in panels. Toggle with the .nf-open class and a backdrop overlay.

Structure

The drawer is composed of an overlay and a panel. The panel contains a header, body, and footer:

<!-- Overlay -->
<div class="nf-drawer-overlay" id="drawer-overlay"></div>

<!-- Left drawer -->
<div class="nf-drawer nf-drawer-left nf-open" id="my-drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-title">
<div class="nf-drawer-header">
  <h2 class="nf-drawer-title" id="drawer-title">SYSTEM_NAV</h2>
  <button class="nf-button nf-button-ghost nf-button-icon" aria-label="Close drawer">✕</button>
</div>
<div class="nf-drawer-body">
  <p>Drawer content goes here.</p>
</div>
<div class="nf-drawer-footer">
  <button class="nf-button nf-button-ghost nf-button-sm">CLOSE</button>
</div>
</div>

Sides

Add .nf-drawer-left or .nf-drawer-right to control which edge the panel slides in from.

Sizes

<div class="nf-drawer nf-drawer-left nf-drawer-sm">...</div>
<div class="nf-drawer nf-drawer-left">...</div>         <!-- default 20rem -->
<div class="nf-drawer nf-drawer-left nf-drawer-lg">...</div>
<div class="nf-drawer nf-drawer-left nf-drawer-xl">...</div>

JavaScript

const overlay = document.getElementById('drawer-overlay');
const drawer  = document.getElementById('my-drawer');
const trigger = document.getElementById('open-drawer');
const close   = drawer.querySelector('[aria-label="Close drawer"]');

function openDrawer() {
  drawer.classList.add('nf-open');
  overlay.classList.remove('nf-hidden');
  drawer.removeAttribute('aria-hidden');
}

function closeDrawer() {
  drawer.classList.remove('nf-open');
  overlay.classList.add('nf-hidden');
  drawer.setAttribute('aria-hidden', 'true');
}

trigger.addEventListener('click', openDrawer);
close.addEventListener('click', closeDrawer);
overlay.addEventListener('click', closeDrawer);

Class reference