Architecture of documentation like website

1

Hi,

I’ve been thinking for quite some time about how to implement a page with a sidebar. This type of layout is very common in documentation pages.

For example:

Example
Example1103×824 151 KB

The main requirement is that when a user clicks inside the sidebar, two things should happen:

  • The main content area loads the new page.
  • The sidebar gets updated — the selected page should be highlighted, or something even more dynamic could happen. Ideally, this should be done without relying on JavaScript. In other words, the sidebar’s current state should be rendered by the server. At the same time, the scroll position in the sidebar should not jump — it should stay exactly where it was at the moment of the click.

I’ve been thinking about possible ways to achieve this. Initially, I considered using a turbo frame.

I could easily set the data-turbo-frame="main" attribute on the sidebar links, and then the main frame (containing the main content) would reload on click. However, it’s not clear how to update the sidebar’s state in this case.

In the end, I came to the conclusion that the only feasible solution is to use turbo streams.

What do you think? Are there any other options to solve this?

2

One option is to just re-render the entire page including the sidebar and enable turbo morphing - it can persist scroll positions. Unless the scroll bar is incredibly complicated it’s by far the simplest approach.

I have a complex side bar with totals etc… and chose to make it turbo-permanent. It uses js to change state of the selected item and open expandable items but I will turn this in to the hidden checkbox and :has pattern at some point. One day I will get around to dynamically updating the totals but so far no one has noticed.

3

Yeah, I though in same way, but don’t like that solution. It seems to me that I’ve already tried it once, and the client-side performance wasn’t very satisfactory (during morphing). Perhaps I should try it again.

I have a complex side bar with totals etc… and chose to make it turbo-permanent. It uses js to change state of the selected item and open expandable items but I will turn this in to the hidden checkbox and :has pattern at some point.

Yes, I’ve considered that option as well :slight_smile:

Anyway. Thank you for the response :+1: