Menu

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

const active = signal('home');
const items = ['home', 'profile', 'settings', 'logout'];

const menu = Menu({ style: 'background-color: oklch(var(--b2)); border-radius: var(--rounded-box, 1rem); width: 14rem;' },
    ...items.map(item => 
        Menu.Item({ 
            active: () => active.value === item,
            onclick: () => { active.value = item; }
        }, item.charAt(0).toUpperCase() + item.slice(1))
    )
);

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

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

const active = signal('home');
const items = ['home', 'profile', 'settings', 'logout'];

const menu = {
    tag: Menu,
    attributes: { style: 'background-color: oklch(var(--b2)); border-radius: var(--rounded-box, 1rem); width: 14rem;' },
    children: items.map(item => ({
        tag: Menu.Item,
        attributes: { 
            active: () => active.value === item,
            onclick: () => { active.value = item; }
        },
        children: [item.charAt(0).toUpperCase() + item.slice(1)]
    }))
};

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

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

const active = signal('home');
const items = ['home', 'profile', 'settings', 'logout'];

const menu = {
    Menu: {
        style: 'background-color: oklch(var(--b2)); border-radius: var(--rounded-box, 1rem); width: 14rem;',
        children: items.map(item => ({
            'Menu.Item': {
                active: () => active.value === item,
                onclick: () => { active.value = item; },
                children: [item.charAt(0).toUpperCase() + item.slice(1)]
            }
        }))
    }
};

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

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

const current = signal('features');

const menu = Menu({ horizontal: true, style: 'background-color: oklch(var(--b2)); border-radius: var(--rounded-box, 1rem);' },
    Menu.Item({ 
        active: () => current.value === 'features',
        onclick: () => { current.value = 'features'; }
    }, '✨ Features'),
    Menu.Item({ 
        active: () => current.value === 'pricing',
        onclick: () => { current.value = 'pricing'; }
    }, '💰 Pricing'),
    Menu.Item({ 
        active: () => current.value === 'docs',
        onclick: () => { current.value = 'docs'; }
    }, '📚 Docs')
);

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

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

const current = signal('features');

const menu = {
    tag: Menu,
    attributes: { horizontal: true, style: 'background-color: oklch(var(--b2)); border-radius: var(--rounded-box, 1rem);' },
    children: [
        {
            tag: Menu.Item,
            attributes: { 
                active: () => current.value === 'features',
                onclick: () => { current.value = 'features'; }
            },
            children: ['✨ Features']
        },
        {
            tag: Menu.Item,
            attributes: { 
                active: () => current.value === 'pricing',
                onclick: () => { current.value = 'pricing'; }
            },
            children: ['💰 Pricing']
        },
        {
            tag: Menu.Item,
            attributes: { 
                active: () => current.value === 'docs',
                onclick: () => { current.value = 'docs'; }
            },
            children: ['📚 Docs']
        }
    ]
};

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

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

const current = signal('features');

const menu = {
    Menu: {
        horizontal: true,
        style: 'background-color: oklch(var(--b2)); border-radius: var(--rounded-box, 1rem);',
        children: [
            {
                'Menu.Item': {
                    active: () => current.value === 'features',
                    onclick: () => { current.value = 'features'; },
                    children: ['✨ Features']
                }
            },
            {
                'Menu.Item': {
                    active: () => current.value === 'pricing',
                    onclick: () => { current.value = 'pricing'; },
                    children: ['💰 Pricing']
                }
            },
            {
                'Menu.Item': {
                    active: () => current.value === 'docs',
                    onclick: () => { current.value = 'docs'; },
                    children: ['📚 Docs']
                }
            }
        ]
    }
};

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