Description
A common issue we have with maglev(and all web development) is how to deal with the header, main, and footer. Especially given the requirement to have the footer be on the bottom of the screen if there isn't enough content. Currently the hack is to include a </main> in the footer blocks and a <main class="flex-grow"> in the header blocks. This means you must pick one header and one footer.
The default maglev has the data-maglev-dropzone in the main tag so we change that to a div. It would be ideal if we could ether set a specific drop zone for headers and footers outside main. Or the ability to create a brick that you can drop other bricks into it.
Of course if there is already a better solution, I would absolutely love to hear it.
For reference our base layout resembles below:
<body class="bg-gray-900 select-none">
<div class="flex flex-col min-h-screen overflow-hidden">
<header></header>
<main class="flex-grow"></main>
<footer></footer>
</div>
</body>Current workaround:
# header.html.erb
<%= maglev_section.wrapper_tag.div class: "text-white body-font bg-gray-900" do %>
<%= render NavbarComponent.new maglev_section: maglev_section %>
<% end %>
<main class="flex-grow"><%# start flex grow %>
# layout.html.erb
<html>
<body class="bg-gray-900 select-none" data-aos-easing="ease-out-back" data-aos-duration="1000" data-aos-delay="0">
<div class="flex flex-col min-h-screen overflow-hidden" x-data data-maglev-dropzone>
<%= render_maglev_sections %>
</div>
</body>
</html>
# footer.html.erb
</main><%# end flex grow %>
<%= maglev_section.wrapper_tag.footer class: "text-gray-400 body-font bg-gray-900 mt-10" do %>
<% end %>
Edit:
After a little digging it looks like this is most of the way there:
<body class="bg-gray-900 select-none" data-aos-easing="ease-out-back" data-aos-duration="1000" data-aos-delay="0">
<div class="flex flex-col min-h-screen overflow-hidden" x-data data-maglev-dropzone>
<%# These should be in some helper if it turns out good %>
<% header_section = maglev_page_sections.select { |section| section["type"] =~ /header$/ } %>
<% footer_section = maglev_page_sections.select { |section| section["type"] =~ /footer$/ } %>
<% remaining_sections = maglev_page_sections.reject do |section|
section["type"] =~ /header$/ || section["type"] =~ /footer$/
end %>
<%= render_maglev_sections page_sections: header_section %>
<main class="flex-grow">
<%= render_maglev_sections page_sections: remaining_sections %>
</main>
<%= render_maglev_sections page_sections: footer_section %>
</div>
</body>
Though this could be improved if sections where taggable in some way or in some other way identifiable, for instance:
<%= render_maglev_sections page_sections_tagged: "header" %>
<%= render_maglev_sections page_sections_tagged: "content" %>
<%= render_maglev_sections page_sections_tagged: "footer" %>