Open in a new tab
View code
tsx
<SplitView
	id="inbox"
	sidebar={<FolderNav />}
	rail={<FolderIcons />}
	list={<ConversationList />}
	detail={selected ? <Conversation id={selected} /> : null}
	empty={<p>Pick a conversation to read it here.</p>}
	backHref="/inbox"
	layout={readSplitViewLayout(request.headers.get("Cookie"))}
	labels={{ resizeSidebar: "Resize folders", resizeList: "Resize conversations", back: "Inbox" }}
/>

// each conversation link in the list
<a href="/inbox?c=42" data-split-view-item aria-current={selected === 42 ? "page" : undefined}>…</a>