<% content_for :shell do %> <%= render_component :split_layout, alpine_data: "$store.layout.main", ":class": "$store.layout.mobile && '!block'" do |layout| %> <% layout.pane class: "flex flex-col bg-lookbook-sidebar relative translate-x-0", ":class": "{ 'transition': $store.layout.mobile, 'translate-x-full': $store.layout.mobile && sidebarHidden, '!absolute right-0 bottom-0 top-[40px] h-[calc(100%_-_40px)] w-full max-w-[420px] z-50 border-l border-lookbook-divider': $store.layout.mobile }", "@click.outside": "closeMobileSidebar", x_cloak: true do %> <%= render_component :split_layout, alpine_data: "$store.layout.#{Lookbook.pages.any? ? "sidebar" : "singleSectionSidebar"}", style: "height: calc(100vh - 2.5rem);" do |layout| %> <% layout.pane class: "overflow-hidden" do %> <%= render_component :nav, collection: Lookbook.previews, alpine_data: "$store.nav.previews", label: "Previews", collapse_singles: true do |nav| %> <% nav.filter store: "$store.nav.previews.filter", placeholder: "Filter by preview name…" %> <% end %> <% end %> <% if Lookbook.pages.any? %> <% layout.pane class: "overflow-hidden" do %> <%= render_component :nav, collection: Lookbook.pages, alpine_data: "$store.nav.pages", label: "Pages" %> <% end %> <% end %> <% end %> <% if Lookbook::Preview.errors.any? %>
<%= render_component :toolbar do |toolbar| %> <% toolbar.section padded: true, class: "flex items-center" do %> <%= render_component :icon, name: :alert_triangle, size: 4, class: "text-red-700" %> Preview load errors <% end %> <% toolbar.section align: :right do %> <% render_component :button, icon: :x, "@click": "hidden = !hidden" %> <% end %> <% end %>
    <% Lookbook::Preview.errors.each do |error| %> <% error = error.is_a?(Lookbook::Error) ? error : Lookbook::Error.new(error) %>
  • <%= error.file_name %><%= ":#{error.line_number}" if error.line_number %>

    <%= error.message %>
  • <% end %>
<% end %> <% end %> <% layout.pane class: "overflow-hidden", ":class": "$store.layout.mobile && 'w-screen'" do %> <%= content_for?(:main) ? yield(:main) : yield %> <% end %> <% end %>
<% end %> <%= render template: "layouts/lookbook/shell" %>