Rails Designer
Posted on August 13, 2024
This article was originally published on Rails Designer
If you are familiar with Static Site Generators (like Jekyll, Middleman or Bridgetown) you might have used nested layouts. Within, say a "docs"-layout, you reference the "default" layout in the frontmatter. Something like this:
---
layout: default
---
I often use a nested layout for my SaaS' settings page. It features a dedicated navigation for the many settings of the product. Unfortunately, Rails doesn't have a native way to nest layouts. But it's not too difficult to built ourselves!
The cleanest solution, and the one I use in my Rails apps, looks like this:
Create a base SettingsController:
# app/controllers/settings_controller.rb
class SettingsController < ApplicationController
end
All other settings controllers will inherit from this (base) controller, eg. Settings::TeamsController < SettingsController. Because the SettingsController matches the layout name (โsettingsโ), this layout will always be picked up correctly.
๐งโ๐จ๐จ Need a way to up your Rails app's UI? Check out Rails Designer
Create a settings-layout:
# app/views/layouts/settings.html.erb
<div class="md:h-screen grid grid-cols-12 gap-4 md:gap-2 lg:gap-8">
<โ %= component "navigation/settings", account: Current.account %>
<div class="col-span-12 md:col-span-8 lg:col-span-9">
<โ %= yield %>
</div>
</div>
<โ % parent_layout "application" %>
You can add whatever component/HTML you need here (Rails Designer's Sidebar Navigation is a good match). Make sure to include the yield
method!
Create a parent_layout
helper
This helper is the important part that makes the nested layout work.
# app/helpers/layouts_helper.rb
module LayoutsHelper
def parent_layout(layout)
@view_flow.set(:layout, output_buffer)
output = render(template: "layouts/#{layout}")
self.output_buffer = ActionView::OutputBuffer.new(output)
end
end
The parent_layout
method saves the current output, then renders the specified parent layout (eg. layouts/application), and finally sets this rendered output as the new output buffer to encapsulate the nested layouts.
Go read this article if you are interested in learning more how layouts work in Ruby on Rails (this article was extracted from it).
๐ก Rails Designer has a collection of beautiful layouts ready for your Rails app. ๐
Posted on August 13, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.