How to hotwire a UI like admin panel?

[bilogic]

Simplified view of a typical admin panel

• Blue = Browser address bar
• Red = Side menu
• Green = Content

I have been stuck with this for a while, but the problem has been clearer and easier to define now, let me explain:

When I click on the red side menu, I expect blue and green to change

• turbo frame can't do the job because it can only update the red part (possibly only a subsection of the red part)
• turbo stream can't do either because it can't update the URL without a stimulus controller (which repeats what hotwire JS does, read: not-DRY)
• turbo drive can do it, but can we do better?

https://discuss.hotwired.dev/t/turbo-stream-inside-turbo-frame-response-is-this-a-legit-pattern/3812/2 I read that it is possible to embed a turbo stream in a turbo frame but it feels hacky and can be quite a challenge to implement. The only way I thought of now is to make special provisions when returning a turbo-frame, i.e. we can dynamically embed a stream when rendering the full/partial blade HTML, but this could become uncacheable.

Am I just overcomplicating the solution or is there already a simpler and elegant one to the above?

Thank you!

[tonysm]

It's definitely tricky. I covered a similar use case in this blogpost.

The main ideas behind it are:

• Have two separate pages: one for the red part list with empty details
• Have a details page where the red part is loaded using a lazy-loading Turbo Frame
• Wrap the red part in a data-turbo-permanent element, so it's persisted when navigating, which makes the Turbo Frame wrapping it not reload (see docs)
• Red Turbo Frame targets _top (makes a full visit, changing URL)
• No need to use a Turbo Frame for the green part since a full visit will replace it (but because the red part is wrapped in a turbo permanent element, it won't reload)

I'll close the issue for now, but please let me know if that was helpful.