UI where a user selects an item in a table and a details panel opens up to the side? (like asana)

[odd granite]

I'm looking to implement an asana-like UI where a user selects an item from a table and a details panel will open up to the side. My current setup causes a page refresh when I select an item.

I'm having trouble figuring out how to go about routing this setup. Each row in the table has a Link item in it. The root page containing the table is something.com/items When a user selects an item the address should be something.com/items/[selectionId]. selectionId is the DB id of the selected item.

I've tried router..push w/ shallow also, but the refresh still seems to happen.

I have my pages set up like this:

- pages
-- items
--- [selectionId].tsx
--- index.tsx

index.tsx
...
  return (
    <ItemsPageContainer title={'Items'}>
      <div className="relative flex h-full w-full flex-row space-y-6">
        <Items organization={organization} />
      </div>
    </ItemsPageContainer >
  )
...

[selectionId].tsx
...
  return (
    <ItemsPageContainer title={'Items'}>
      <div className="relative flex h-full w-full flex-row space-y-6">
        <Items organization={organization} />
        <DetailsPane /> // Adds details pane
      </div>
    </ItemsPageContainer >
  )
...

[tough cipher]

Hi @odd granite - To maintain your components across page navigation without unmounting/mounting, you need to use a shared layout for each page. This articles has a great explanation of how to pull it off: https://medium.com/@steveliles/deeply-nested-layouts-in-next-js-3b30e7ba9b9e

[odd granite]

amazing! Thanks, @tough cipher, this looks promising. Will try it out today

[odd granite]

yep, that did the trick. After messing around with it for a while it all clicked. Thanks again!