Drawer

Organism

Kenar paneli. left/right açılım, backdrop, ESC ve tabindex=-1 odak yönetimi ile birlikte gelir.

Right drawer

Preview

Notifications

New comment on your post
2 min ago
Payment confirmed
1 hour ago
Weekly report ready
Yesterday

Code




<%- 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

Name

Code

<%- include('modules/ui/Drawer', {
  id: 'edit-drawer',
  title: 'Edit item',
  children: '...',
  footer: '...'
}) %>

Source modules/ui/Drawer.ejs

<%
var _id    = locals.id    || 'drawer-' + Math.random().toString(36).substr(2, 9);
var _title = locals.title || '';
var _side  = locals.side  || 'right';
var _open  = locals.open  || false;

var overlayClass = _open
  ? 'opacity-100'
  : 'opacity-0 pointer-events-none';

var panelBase = 'relative flex flex-col w-80 max-w-full h-full bg-surface-raised border-border shadow-xl transition-transform duration-200 focus-visible:outline-none';
var panelSide = _side === 'right'
  ? 'ml-auto border-l'
  : 'mr-auto border-r';
var panelTranslate = _open
  ? 'translate-x-0'
  : (_side === 'right' ? 'translate-x-full' : '-translate-x-full');
%>


  
  

  
  
    
    
      <%= _title %>
      
    

    
    
      <%- locals.children || '' %>
    

    <% if (locals.footer) { %>
    
    
      <%- locals.footer %>
    
    <% } %>