Frame

<Frame
    style={{minHeight:400}}
    header={<div style={{ backgroundColor: 'black', height: 56 }} />}
>
    Page Content
</Frame>

<State initial={0}>
    {([active, setActive]) => (
        <Frame
            style={{minHeight:500}}
            header={<div style={{ backgroundColor: 'black', height: 56 }} />}
        >
            <Page
                sidebar={
                    <Sidebar localStorageKey="frame__example-with-page-and-sidebar">
                        <SideNav title="Marketing">
                            <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>
                        <Sidebar.Section>
                            <Card onClick={() => setActive(4)} active={active===4}>Test</Card>
                        </Sidebar.Section>
                    </Sidebar>
                }
            >
                <Layout type="2Col">
                    <Layout.Section>
                        <Card>Card 1</Card>
                    </Layout.Section>
                    <Layout.Section>
                        <Card>Card 2</Card>
                    </Layout.Section>
                </Layout>
            </Page>
        </Frame>
    )}
</State>