Challenges in Implementing a Reusable Dynamic Sidebar for Rendering Static and Async Contenc

1

Hi all,

I’m exploring some alternatives to implement a floating sidebar that can be reused to render both static and async content.

To give an idea, the sidebar will be similar to the one implemented by hubspot:

Screenshot 2023-11-24 at 19.43.38
Screenshot 2023-11-24 at 19.43.383002×1144 145 KB

Following turbo-rails way, rendering and displaying async content is straighforward.

The code looks like this:

layout.html.erb

<html>
  <body> 
     <main> <%= yield %> </main>
     <%= turbo_frame_tag "floating-sidebar" %>
  </body> 
</html>

app/resource/new.html.erb (returns a visible sidebar that will be added to the layout)

<%= turbo_frame_tag "floating-sidebar" do %>
  <%= render FloatingSidebardComponent.new(hidden: false) do %>
  ...
  <% end %>
<% end %>

The problem I’m facing is to how display the static content. I’m not sure how to render the static content in the layout and how to display it in the sidebar.

Currently I’m tring something along these lines:

some/view/containing/sidebar.html.erb

...
<%= render FloatingSidebardComponent.new(hidden: true) do |sidebar| %>
  <% sidebar.with_trigger do %>
    <button> open sidebar 1 </button>
  <% end %>

  <% sidebar.with_content do %>
    ...
  <% end %>
<% end %>

...
<%= render FloatingSidebardComponent.new(hidden: true) do %>
  <% sidebar.with_trigger do %>
    <button> open sidebar 2 </button>
  <% end %>

  <% sidebar.with_content do %>
    ...
  <% end %>
<% end %>

By adding some JS, the buttons will toggle the visibility of the sidebar.

This approach works but it’s not ideal. I would like to avoid having to render the sidebar in every view that needs it. I would like to reuse the floating-sidebar and dinamically populate it with the content I need.

Any suggestion or idea on how to achieve this?

Thanks!