Drawer

Organism

Side panel sliding in from the screen edge. Left / right placement with focus management and Escape close.

Right drawer

Preview

Notifications

  • New comment on your post

    2 min ago

  • Payment confirmed

    1 hour ago

  • Weekly report ready

    Yesterday

Code 
<!-- Trigger -->
<button onclick="openDrawer('notif-drawer')">Notifications</button>

<%- include('modules/ui/Drawer', {
  id: 'notif-drawer',
  title: 'Notifications',
  side: 'right',
  children: '...'
}) %>

Left drawer

Preview

Navigation

Code 
<%- include('modules/ui/Drawer', {
  id: 'nav-drawer',
  title: 'Navigation',
  side: 'left',
  children: '...'
}) %>

With footer

Preview

Edit item

Code 
<%- include('modules/ui/Drawer', {
  id: 'edit-drawer',
  title: 'Edit item',
  children: '...',
  footer: '<div class="flex gap-2 justify-end">...</div>'
}) %>
Source modules/ui/Drawer.ejs