application.html.erb

<% content_for :body do %>
  <%= turbo_stream_from "media_sync" %>

  <% if native_app? %>
    <%= render "shared/flash" %>
    <main class='u-p-large u-p-small@small'>
      <%= yield %>
    </main>
  <% else %>
    <div class='o-flex'>
      <aside id='js-sidebar' class='o-flex__item o-flex__item--shrink-0 c-sidebar'>
        <div class='o-flex o-flex--column-reverse u-position-sticky-top u-overflow-auto u-vh-100'>
          <div class='o-flex__item o-flex__item--shrink-0'>
            <%= render "shared/player" %>
          </div>
          <div class='o-flex__item o-flex__item--grow-1 u-h-0'>
            <%= turbo_frame_tag "turbo-playlist", src: current_playlist_songs_path, class: "u-h-100 o-flex o-flex--column" %>
          </div>
        </div>
      </aside>
      <div id='js-app' class='o-flex__item o-flex__item--grow-1'>
        <div>
          <header class='c-nav c-nav--primary u-position-sticky-top'>
            <%= render "shared/flash" %>
            <%= render "shared/search_bar" %>
            <%= render "shared/nav_bar" %>
          </header>
          <main class='o-container--wide u-m-auto u-p-large u-p-small@small u-p-narrow@extra-narrow'>
            <%= yield %>
          </main>
          <footer class='u-display-none u-display-block@extra-small u-position-fixed-bottom'>
            <%= render "shared/mini_player" %>
          </footer>
        </div>
      </div>
    </div>
  <% end %>

  <div id='js-overlay' class='c-overlay c-overlay--fixed c-overlay--blur u-display-none'></div>
  <%= turbo_frame_tag "turbo-dialog" %>
<% end %>

<%= render template: "layouts/base" %>