lightview/docs/components/component-nav.html

A reactive UI library with features of Bau, Juris, and HTMX plus safe LLM UI generation

<!-- Component Navigation Sidebar -->
<div class="sidebar-header">
    <h2 class="sidebar-title">Components</h2>
    <p class="sidebar-subtitle">Over 50 components</p>
</div>
<ul class="sidebar-nav"
    style="max-height: calc(100vh - 120px); overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; grid-auto-flow: row;"
    id="sidebar-links"></ul>

<script>
    (() => {
        const { tags, $ } = Lightview;
        const { li, a } = tags;

        // Populate sidebar links - alphabetically sorted
        const sidebarLinks = [
            'Accordion', 'Alert', 'Avatar', 'Badge', 'Breadcrumbs', 'Button', 'Card',
            'Carousel', 'Chart', 'Chart Area', 'Chart Bar', 'Chart Column', 'Chart Line', 'Chart Pie',
            'Chat', 'Checkbox', 'Collapse', 'Countdown', // 'Diff',
            'Divider', 'Dock', 'Drawer', 'Dropdown', 'File Input', 'Footer', 'Hero',
            'Indicator', 'Input', 'Join', 'Kbd', 'Loading', 'Menu', 'Modal', 'Navbar',
            'Pagination', 'Progress', 'Radial Progress', 'Radio', 'Range', 'Rating',
            'Select', 'Stats', 'Steps', 'Swap', 'Table', 'Tabs', 'Textarea',
            'Timeline', 'Toast', 'Toggle', 'Tooltip'
        ].sort(); // Sort alphabetically

        const linksContainer = $('#sidebar-links');
        const items = sidebarLinks.map(name => {
            const slug = name.toLowerCase().replace(/\s+/g, '-');
            return li({}, a({ href: `/docs/components/${slug}` }, name));
        });
        linksContainer.content(items);
    })();
</script>

<script type="module">
    import { initSidebar } from './sidebar-setup.js';
    const sidebarAPI = initSidebar();

    // Close drawer when clicking navigation links to prevent page shift
    if (sidebarAPI) {
        const sidebarLinks = document.getElementById('sidebar-links');
        if (sidebarLinks) {
            sidebarLinks.addEventListener('click', (e) => {
                // Check if clicked element is a link or inside a link
                const link = e.target.closest('a');
                if (link) {
                    sidebarAPI.close();
                }
            });
        }
    }
</script>