lightview
Version:
A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation
515 lines (478 loc) • 20.4 kB
HTML
<!-- SEO-friendly SPA Shim -->
<script src="/lightview-router.js"></script>
<script>
if (globalThis.LightviewRouter) {
LightviewRouter.base('/index.html');
}
</script>
<!-- Load the page-specific stylesheet -->
<link rel="stylesheet" href="./index.css">
<!-- Gallery Structure -->
<div class="gallery-page">
<div class="gallery-layout">
<!-- Sidebar Overlay -->
<div id="sidebar-overlay" class="sidebar-overlay"></div>
<!-- Sidebar -->
<div id="gallery-sidebar" class="gallery-sidebar" style="visibility: hidden" src="./component-nav.html"></div>
<!-- Main Content -->
<div id="gallery-main" class="gallery-main">
<!-- Header Container -->
<div
style="position: sticky; top: 0; z-index: 30; background: var(--gallery-surface); border-bottom: 1px solid var(--gallery-border); backdrop-filter: blur(8px);">
<!-- Breadcrumbs Row -->
<div style="padding: 0.75rem 1.5rem 0;">
<script>
(() => {
const { Breadcrumbs } = Lightview.tags;
const breadcrumbs = Breadcrumbs({
id: 'page-breadcrumbs',
items: [
{ label: 'Components', href: '/docs/components' },
{ label: 'Drawer' }
]
});
document.currentScript.replaceWith(breadcrumbs.domEl);
})();
</script>
</div>
<!-- Title Row -->
<div class="gallery-header"
style="border-bottom: none; height: auto; padding-top: 0.5rem; padding-bottom: 0.75rem;">
<button id="toggle-btn" class="toggle-btn" aria-label="Toggle Sidebar">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="toggle-icon"
style="stroke: currentColor; stroke-width: 2;">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7" />
</svg>
</button>
<h1 class="gallery-title">Drawer</h1>
</div>
</div>
<!-- Content -->
<div class="gallery-content">
<div class="section-content" style="max-width: 1000px;">
<p class="text-lg" style="opacity: 0.7; margin-bottom: 1.5rem;">
Drawer is a sidebar that can be opened from the left or right side.
Perfect for navigation menus and side panels.
</p>
<!-- Basic Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Basic Example</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Drawer with toggle button and menu</p>
<!-- Tabs -->
<script>
globalThis.switchSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`tab-btn-${t}`);
const contentEl = document.getElementById(`syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchSyntaxTab('tagged')">Tagged</button>
<button id="tab-btn-vdom" role="tab" class="syntax-tab" onclick="switchSyntaxTab('vdom')">vDOM</button>
<button id="tab-btn-object" role="tab" class="syntax-tab" onclick="switchSyntaxTab('object')">Object
DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220,
autoRun: true,
html: '<div id="demo" style="height: 200px;"></div>'
});
</script><code contenteditable="true">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);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220,
html: '<div id="demo" style="height: 200px;"></div>'
});
</script><code contenteditable="true">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);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220,
html: '<div id="demo" style="height: 200px;"></div>'
});
</script><code contenteditable="true">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);</code></pre>
</div>
</div>
</div>
<!-- Reactive Example with Examplify -->
<div class="card bg-base-200" style="margin-bottom: 2rem;">
<div class="card-body">
<h2 class="card-title">Right Side Drawer</h2>
<p class="text-sm" style="opacity: 0.7; margin-bottom: 1rem;">Drawer opening from the right</p>
<!-- Tabs -->
<script>
globalThis.switchReactiveSyntaxTab = (tabId) => {
const tabs = ['tagged', 'vdom', 'object'];
tabs.forEach(t => {
const tabEl = document.getElementById(`reactive-tab-btn-${t}`);
const contentEl = document.getElementById(`reactive-syntax-${t}`);
if (t === tabId) {
tabEl.classList.add('syntax-tab-active');
contentEl.style.display = 'block';
} else {
tabEl.classList.remove('syntax-tab-active');
contentEl.style.display = 'none';
}
});
};
</script>
<div role="tablist" class="syntax-tabs" style="margin-bottom: 1rem;">
<button id="reactive-tab-btn-tagged" role="tab" class="syntax-tab syntax-tab-active"
onclick="switchReactiveSyntaxTab('tagged')">Tagged</button>
<button id="reactive-tab-btn-vdom" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('vdom')">vDOM</button>
<button id="reactive-tab-btn-object" role="tab" class="syntax-tab"
onclick="switchReactiveSyntaxTab('object')">Object DOM</button>
</div>
<!-- Tagged Syntax -->
<div id="reactive-syntax-tagged">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220,
html: '<div id="demo" style="height: 200px;"></div>'
});
</script><code contenteditable="true">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);</code></pre>
</div>
<!-- vDOM Syntax -->
<div id="reactive-syntax-vdom" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220,
html: '<div id="demo" style="height: 200px;"></div>'
});
</script><code contenteditable="true">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);</code></pre>
</div>
<!-- Object DOM Syntax -->
<div id="reactive-syntax-object" style="display: none;">
<pre><script>
examplify(document.currentScript.nextElementSibling, {
at: document.currentScript.parentElement,
scripts: ['/lightview.js', '/lightview-x.js'],
styles: ['https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.min.css'],
type: 'module',
minHeight: 220,
html: '<div id="demo" style="height: 200px;"></div>'
});
</script><code contenteditable="true">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);</code></pre>
</div>
</div>
</div>
<!-- Props Table -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Props</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>id</code></td>
<td>string</td>
<td>auto</td>
<td>Unique ID for the drawer toggle</td>
</tr>
<tr>
<td><code>open</code></td>
<td>boolean | function</td>
<td>false</td>
<td>Control open state (reactive)</td>
</tr>
<tr>
<td><code>end</code></td>
<td>boolean</td>
<td>false</td>
<td>Open from right side</td>
</tr>
</tbody>
</table>
</div>
<!-- Sub-components -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Sub-components</h2>
<div style="overflow-x: auto; margin-bottom: 2rem;">
<table class="table table-zebra">
<thead>
<tr>
<th>Component</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Drawer.Content</code></td>
<td>Main content area (visible when drawer is closed)</td>
</tr>
<tr>
<td><code>Drawer.Side</code></td>
<td>Sidebar content container</td>
</tr>
<tr>
<td><code>Drawer.Overlay</code></td>
<td>Click-to-close overlay backdrop</td>
</tr>
<tr>
<td><code>Drawer.Button</code></td>
<td>Toggle button to open drawer</td>
</tr>
</tbody>
</table>
</div>
<!-- Static Example -->
<h2 class="text-xl font-bold" style="margin-bottom: 1rem;">Interactive Demo</h2>
<div class="drawer rounded-lg border border-base-300"
style="margin-bottom: 2rem; height: 12rem; overflow: hidden;">
<input id="demo-drawer" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col items-center justify-center">
<label for="demo-drawer" class="btn btn-primary drawer-button">Open drawer</label>
</div>
<div class="drawer-side z-50">
<label for="demo-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
<ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
<li><a>Sidebar Item 1</a></li>
<li><a>Sidebar Item 2</a></li>
<li><a>Sidebar Item 3</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>