Drawer

await import('/components/layout/drawer.js');
const { tags, $ } = Lightview;
const { ul, li, a, p, Drawer } = 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').content(drawer);

await import('/components/layout/drawer.js');
const { $, tags } = Lightview;
const { Drawer, ul, li, a, p } = tags;

const drawerId = 'my-drawer';

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

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

await import('/components/layout/drawer.js');
const { $ } = Lightview;

const drawerId = 'my-drawer';

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

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

await import('/components/layout/drawer.js');
await import('/components/actions/button.js');

const { tags, $ } = Lightview;
const { ul, li, a, div, p, h3, Drawer, Button } = 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').content(drawer);

await import('/components/layout/drawer.js');
await import('/components/actions/button.js');
const { $, tags } = Lightview;
const { Drawer, Button, div, h3, p } = tags;

const drawerId = 'cart-drawer';

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

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

await import('/components/layout/drawer.js');
await import('/components/actions/button.js');
const { $ } = Lightview;

const drawerId = 'cart-drawer';

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

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