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>