Navbar

await import('/components/layout/navbar.js');
await import('/components/actions/button.js');
await import('/components/navigation/menu.js');

const { tags, $ } = Lightview;
const { Navbar, Button, Menu } = tags;

const navbar = Navbar({ style: 'background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem);' },
    Navbar.Start({},
        Button({ ghost: true, style: 'font-size: 1.25rem;' }, '🚀 Lightview')
    ),
    Navbar.Center({ style: 'display: flex;' },
        Menu({ horizontal: true },
            Menu.Item({}, 'Features'),
            Menu.Item({}, 'Pricing'),
            Menu.Item({}, 'About')
        )
    ),
    Navbar.End({},
        Button({ color: 'primary' }, 'Get Started')
    )
);

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

await import('/components/layout/navbar.js');
await import('/components/actions/button.js');
await import('/components/navigation/menu.js');
const { $, tags } = Lightview;
const { Navbar, Button, Menu } = tags;

const navbar = {
    tag: Navbar,
    attributes: { style: 'background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem);' },
    children: [
        {
            tag: Navbar.Start,
            children: [{ tag: Button, attributes: { ghost: true, style: 'font-size: 1.25rem;' }, children: ['🚀 Lightview'] }]
        },
        {
            tag: Navbar.Center,
            attributes: { style: 'display: flex;' },
            children: [
                {
                    tag: Menu,
                    attributes: { horizontal: true },
                    children: [
                        { tag: Menu.Item, children: ['Features'] },
                        { tag: Menu.Item, children: ['Pricing'] },
                        { tag: Menu.Item, children: ['About'] }
                    ]
                }
            ]
        },
        {
            tag: Navbar.End,
            children: [{ tag: Button, attributes: { color: 'primary' }, children: ['Get Started'] }]
        }
    ]
};

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

await import('/components/layout/navbar.js');
await import('/components/actions/button.js');
await import('/components/navigation/menu.js');
const { $ } = Lightview;

const navbar = {
    Navbar: {
        style: 'background-color: oklch(var(--b1)); border-radius: var(--rounded-box, 1rem);',
        children: [
            {
                'Navbar.Start': {
                    children: [{ Button: { ghost: true, style: 'font-size: 1.25rem;', children: ['🚀 Lightview'] } }]
                }
            },
            {
                'Navbar.Center': {
                    style: 'display: flex;',
                    children: [
                        {
                            Menu: {
                                horizontal: true,
                                children: [
                                    { 'Menu.Item': { children: ['Features'] } },
                                    { 'Menu.Item': { children: ['Pricing'] } },
                                    { 'Menu.Item': { children: ['About'] } }
                                ]
                            }
                        }
                    ]
                }
            },
            {
                'Navbar.End': {
                    children: [{ Button: { color: 'primary', children: ['Get Started'] } }]
                }
            }
        ]
    }
};

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