Responsive Navigation with Turbo Discussion

Chris! The video is se to private!

This is a fantastic approach and extremely clean. Thanks for sharing this!

Use Turbo's

element to contain your navigation links. This clearly identifies the navigation content.

The Law of Demeter is a design guideline that aims to reduce coupling between objects by limiting how objects interact with each other. It states that a method of an object should only call methods:

On itself
On its parameters
On objects it created
On component objects

One problem is if you are using this and you go to a show view; the request.path would now include the ID of the record you are looking at. While you are not at the index view that the navigation points to anymore, the dropdown will default to the first element again. So it might be a good idea to use include_blank: true or a prompt: "Navigation" to avoid issues trying to access that first navigation option.

For Bootstrap, which might be outdated..:

<%= select_tag nil, options_for_select(items, request.path), class: "d-md-none", onchange: "Turbo.visit(this.selectedOptions[0].value)" %>

<div class="d-none d-md-block">
  <ul class="nav">
    <% items.each do |text, path| %>
      <li class="nav-item"><%= link_to text, path, class: "nav-link" %></li>
    <% end %>
  </ul>
</div>

Bonus, add action: "replace to Turbo.visit() so a new screen isn't pushed in Turbo Native!

Great video. I would prefer if rails gave us the UI separation bore "rails style", like, I don't know, two have a view .html.erb and a view .m.html.erb and implemented both options in a separate file. Does it make sense?

For a more complex view, it could be such a hard thing to maintain multiple view logic complexity for both UIs.

that's great