Dock

Basic Example

Interactive bottom navigation

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

const { signal, tags, $ } = Lightview;
const { div } = tags;

const active = signal('home');

const demo = div({ class: 'relative h-32 bg-base-200 rounded-box overflow-hidden' },
    Dock({ class: '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'))
    )
);

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