How to build nested layouts

[timwis]

Hi all, I'm loving phlex so far, but am struggling to get nested layouts working. Would someone mind sharing an example of how they've done so?

I've tried to replicate the erb approach described in the rails docs:

class ApplicationLayout < ApplicationView
  include Phlex::Rails::Layout
  include Phlex::Rails::Helpers::TurboRefreshesWith

  def view_template(&block)
    doctype

    html do
      head do
        title { yield(:title) || "App Name" }
        meta name: "viewport", content: "width=device-width,initial-scale=1"
        meta name: "apple-mobile-web-app-capable", content: "yes"
        csrf_meta_tags
        csp_meta_tag
        turbo_refreshes_with method: :morph, scroll: :preserve
        yield(:head)
        link rel: "manifest", href: "/manifest.json"
        link rel: "icon", type: "image/png", href: "/icon.png"
        link rel: "icon", type: "image/svg+xml", href: "/icon.svg"
        link rel: "apple-touch-icon", href: "/icon.png"
        stylesheet_link_tag "tailwind", "inter-font", data_turbo_track: "reload"
        stylesheet_link_tag "application", data_turbo_track: "reload"
        javascript_importmap_tags
      end

      body do
        main(class: "container mx-auto mt-28 px-5 flex") do
          content_for?(:content) ? yield(:content) : yield
        end
      end
    end
  end
end

# simplified example, but will ultimately be a drawer popping out alongside the main content
class DrawerLayout < ApplicationView
  include Phlex::Rails::Layout

  def view_template
    content_for(:content) do
      div(class: "drawer") do
        h1 { "Drawer" }
        yield
      end
    end
    render ApplicationLayout.new
  end
end

But I'm getting an error, no block given (yield) on each of the yield lines.

[joeldrapper]

I haven't really explored Rails’ flavour of nested layouts. Unless you need compatibility with non Phlex views, I recommend using components for layouts instead. You can set layout false in the controller, then render a Phlex view, e.g. render Views::Posts::Index.new(posts: Post.all). Inside the view, render your layout component with the content inside.

def view_template
  render LayoutComponent do
    h1 { "Posts" }
  end
end

I need to improve the documentation on this. Sorry it’s so poor at the moment.