Drawer

Drawer is a sidebar that can be opened from the left or right side. Perfect for navigation menus and side panels.

const { default: Drawer } = await import('/components/layout/drawer.js');

const { tags, $ } = Lightview;
const { ul, li, a, p } = tags;

const drawerId = 'my-drawer';

const drawer = Drawer({ id: drawerId },
    Drawer.Content({},
        Drawer.Button({ for: drawerId }, 'Open Drawer'),
        p({ class: 'py-4' }, 'Main content area. Click the button to open the drawer.')
    ),
    Drawer.Side({ class: 'z-50' },
        Drawer.Overlay({ for: drawerId }),
        ul({ class: 'menu bg-base-200 text-base-content min-h-full w-64 p-4' },
            li({}, a({}, '📁 Dashboard')),
            li({}, a({}, '👤 Profile')),
            li({}, a({}, '⚙️ Settings')),
            li({}, a({}, '🚪 Logout'))
        )
    )
);

$('#demo').insert(drawer);

const { default: Drawer } = await import('/components/layout/drawer.js');
const { default: Button } = await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { ul, li, a, div, p, h3 } = tags;

const drawerId = 'cart-drawer';

const drawer = Drawer({ id: drawerId, end: true },
    Drawer.Content({},
        Drawer.Button({ for: drawerId, class: 'btn-accent' }, '🛒 View Cart')
    ),
    Drawer.Side({ class: 'z-50' },
        Drawer.Overlay({ for: drawerId }),
        div({ class: 'bg-base-200 text-base-content min-h-full w-80 p-4' },
            h3({ class: 'text-lg font-bold mb-4' }, '🛒 Shopping Cart'),
            div({ class: 'divider' }),
            p({ class: 'opacity-70' }, 'Your cart is empty'),
            div({ class: 'mt-4' },
                Button({ color: 'primary', class: 'w-full' }, 'Checkout')
            )
        )
    )
);

$('#demo').insert(drawer);

Props

Sub-components

Interactive Demo