I have a list of items, when you click on one of those items, we open the details of that item within a Dialog.

let's say that we have these routes:

- items/page.tsx
- items/[itemId]/page.tsx

I want to make it so that when you click on an item, it opens the dialog client-side, but the contents of the dialog are rendered on the server.

What I'm thinking so far is that the list of items might need to be in a layout.tsx and when they click on an Item I both navigate to [itemid]/page.tsx and open the dialog in the layout so that I don't lose state.

the contents of [itemId]/page.tsx would basically be inside the layout like so:

const Layout = ({children}) =>
<ItemList onClick={openDialog}>
<Dialog open={isOpen}>{children}</Dialog>

That sounds very hacky though, and so my question is, is there a better/built in way to do this?

Thanks!