Dock

const { default: Dock } = await import('/components/navigation/dock.js');
const { signal, tags, $ } = Lightview;
const { div } = tags;

const active = signal('home');

const demo = div({ style: 'position: relative; height: 8rem; background-color: #f2f2f2; border-radius: 1rem; overflow: hidden;' },
    Dock({ style: 'position: absolute; bottom: 0; left: 0; right: 0;' },
        Dock.Item({ 
            active: () => active.value === 'home',
            onclick: () => { active.value = 'home'; }
        }, '🏠', Dock.Label({}, 'Home')),
        Dock.Item({ 
            active: () => active.value === 'search',
            onclick: () => { active.value = 'search'; }
        }, '🔍', Dock.Label({}, 'Search')),
        Dock.Item({ 
            active: () => active.value === 'profile',
            onclick: () => { active.value = 'profile'; }
        }, '👤', Dock.Label({}, 'Profile'))
    )
);

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

const { default: Dock } = await import('/components/navigation/dock.js');
const { signal, $ } = Lightview;

const active = signal('home');

const demo = {
    tag: 'div',
    attributes: { style: 'position: relative; height: 8rem; background-color: #f2f2f2; border-radius: 1rem; overflow: hidden;' },
    children: [
        {
            tag: Dock,
            attributes: { style: 'position: absolute; bottom: 0; left: 0; right: 0;' },
            children: [
                {
                    tag: Dock.Item,
                    attributes: { active: () => active.value === 'home', onclick: () => { active.value = 'home'; } },
                    children: ['🏠', { tag: Dock.Label, children: ['Home'] }]
                },
                {
                    tag: Dock.Item,
                    attributes: { active: () => active.value === 'search', onclick: () => { active.value = 'search'; } },
                    children: ['🔍', { tag: Dock.Label, children: ['Search'] }]
                },
                {
                    tag: Dock.Item,
                    attributes: { active: () => active.value === 'profile', onclick: () => { active.value = 'profile'; } },
                    children: ['👤', { tag: Dock.Label, children: ['Profile'] }]
                }
            ]
        }
    ]
};

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

await import('/components/navigation/dock.js');
const { signal, $ } = Lightview;

const active = signal('home');

const demo = {
    div: {
        style: 'position: relative; height: 8rem; background-color: #f2f2f2; border-radius: 1rem; overflow: hidden;',
        children: [
            {
                Dock: {
                    style: 'position: absolute; bottom: 0; left: 0; right: 0;',
                    children: [
                        { 'Dock.Item': { active: () => active.value === 'home', onclick: () => { active.value = 'home'; }, children: ['🏠', { 'Dock.Label': { children: ['Home'] } }] } },
                        { 'Dock.Item': { active: () => active.value === 'search', onclick: () => { active.value = 'search'; }, children: ['🔍', { 'Dock.Label': { children: ['Search'] } }] } },
                        { 'Dock.Item': { active: () => active.value === 'profile', onclick: () => { active.value = 'profile'; }, children: ['👤', { 'Dock.Label': { children: ['Profile'] } }] } }
                    ]
                }
            }
        ]
    }
};

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