Navbar#

import { component, render } from 'sigx';
import { Navbar, Button } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Navbar
            rounded="box"
            class="shadow-sm"
            slots={{
                start: () => <Button variant="ghost" class="text-xl">sigx</Button>,
                end: () => <Button variant="primary" size="sm">Login</Button>,
            }}
        />
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Navbar, Button, Menu } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Navbar
            background="base-200"
            rounded="box"
            slots={{
                start: () => <Button variant="ghost" class="text-xl">Brand</Button>,
                center: () => (
                    <Menu horizontal>
                        <Menu.Item>Docs</Menu.Item>
                        <Menu.Item>Blog</Menu.Item>
                        <Menu.Item>About</Menu.Item>
                    </Menu>
                ),
                end: () => <Button variant="ghost" circle>⚙</Button>,
            }}
        />
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Navbar, Button, Col } from '@sigx/daisyui';

const Demo = component(() => {
    const bar = (background: 'primary' | 'neutral' | 'base-300') => (
        <Navbar
            background={background}
            rounded="box"
            slots={{
                start: () => <span class="text-lg font-semibold px-2">{background}</span>,
                end: () => <Button variant="ghost" size="sm">Action</Button>,
            }}
        />
    );

    return () => (
        <Col gap="3">
            {bar('primary')}
            {bar('neutral')}
            {bar('base-300')}
        </Col>
    );
});

render(<Demo />, "#sandbox");