Main+detail layout issues

1

I’ve built a layout using a combination of turbo-stream and turbo-frame. In one frame I’m streaming a list of objects. When clicked, the show action loads into another frame. It’s a pretty conventional layout and it works great, until I need to provide a link to a single object somewhere in my app. What happens then is the show action renders on its own in the browser, just like it would normally.

My conceptual question is: how do I essentially “reassemble” my page when a user clicks on a link to view one of these objects—loading the show action into a frame within the index?

Think email → viewer, where you want any reference to an individual email to be loaded into the full app UI rather than any individual email just rendering on its own.

The skeleton of my page is basically this:

<div>
  <main>
    <%= turbo_stream_from "contacts" %>
    <div id="contacts">
      Contacts are listed here, and wired up to the 'details' turbo frame below.
    </div>
  </main>
      
  <sidebar>
    <%=turbo_frame_tag :details do %>
      Contact details load here. Any time a user follows a link like "contact/123" I'd like it to load "/contacts", with the `show' action rendered here.
    <% end %>
  </sidebar>
</div>

I hope this makes sense, and thanks!

2

Think how you would do it in a non-turbo-frame app.

Contacts#index would render main containing your contacts with an empty sidebar.
Contacts#show would render main, containing your contacts, with a sidebar containing the selected sidebar.

Implement this.
Then add in the turbo-frames, so the links in main are pointing at your sidebar turbo-frame. When #show is loaded, it will find the matching turbo-frame and only replace the sidebar. However if #show is called outside of a turbo request, it will render the full page.

1 Like
3

Yep, this is exactly the solution. I took some time away to work on other stories yesterday and slowly started to arrive at something like this. I’ll implement and see how it goes. Thanks!