Side Nav

<Sidebar>
<State initial={0}>
    {([active, setActive]) => (
        <SideNav
            title={
                <span>
                    Marketing
                    <Tag subtle compact>Within Sidebar</Tag>
                </span>
            }>
            <SideNav.Item onClick={() => setActive(0)} active={active===0}>Dashboard</SideNav.Item>
            <SideNav.Item onClick={() => setActive(1)} active={active===1}>Campaigns</SideNav.Item>
            <SideNav.Item onClick={() => setActive(2)} active={active===2}>Emails</SideNav.Item>
            <SideNav.Item onClick={() => setActive(3)} active={active===3}>Audiences</SideNav.Item>
        </SideNav>
    )}
</State>
</Sidebar>

<State initial={0}>
    {([active, setActive]) => (
        <SideNav
            title={
                <span>
                    Marketing
                    <Tag color="warning" subtle compact>Plain</Tag>
                </span>
            }>
            <SideNav.Item onClick={() => setActive(0)} active={active===0} icon="odometer">Dashboard</SideNav.Item>
            <SideNav.Item onClick={() => setActive(1)} active={active===1} icon="bullhorn">Campaigns</SideNav.Item>
            <SideNav.Item onClick={() => setActive(2)} active={active===3} icon="email">Emails</SideNav.Item>
            <SideNav.Item onClick={() => setActive(3)} active={active===4} icon="group_work">Audiences</SideNav.Item>
        </SideNav>
    )}
</State>