<% content_for :shell do %>
<% if @previews.any? || @pages.any? %>
<%= lookbook_render :split_layout,
alpine_data: "$store.layout.main",
":class": "$store.layout.mobile && '!block'" do |layout| %>
<% layout.with_pane id: "app-sidebar", class: "flex flex-col bg-lookbook-sidebar-bg 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",
cloak: true do %>
<% cache Lookbook::Engine.last_changed do %>
<%= lookbook_render :split_layout,
alpine_data: "$store.layout.#{@pages.any? && @previews.any? ? "sidebar" : "singleSectionSidebar"}",
style: "height: calc(100vh - 2.5rem);" do |layout| %>
<% if @previews.any? %>
<% layout.with_pane class: "overflow-hidden" do %>
<%= lookbook_render :nav,
id: "previews-nav",
tree: @previews.to_tree,
alpine_data: "$store.nav.previews" do |nav| %>
<%= nav.with_toolbar do |toolbar| %>
<% toolbar.with_section padded: true do %>
Previews
<% end %>
<% toolbar.with_section align: :right, padded: false do %>
<%= lookbook_render :button_group, size: :xs do |group| %>
<% group.with_button icon: :minus_square,
tooltip: "Collapse all",
"@click": "closeAll" %>
<% end %>
<% end %>
<% end %>
<% nav.with_filter store: "$store.nav.previews.filter", placeholder: "Filter previews by name…" %>
<% end %>
<% end %>
<% end %>
<% if @pages.any? %>
<% layout.with_pane class: "overflow-hidden" do %>
<%= lookbook_render :nav,
id: "pages-nav",
tree: @pages.to_tree,
alpine_data: "$store.nav.pages" do |nav| %>
<%= nav.with_toolbar do |toolbar| %>
<% toolbar.with_section padded: true do %>
Pages
<% end %>
<% toolbar.with_section align: :right, padded: false do %>
<%= lookbook_render :button_group, size: :xs do |group| %>
<% group.with_button icon: :minus_square,
tooltip: "Collapse all",
"@click": "closeAll" %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% layout.with_pane id: "app-main", class: "overflow-hidden h-full", ":class": "$store.layout.mobile && 'w-screen'" do %>
<%= content_for?(:main) ? yield(:main) : yield %>
<% end %>
<% end %>
<% else %>
<%= content_for?(:main) ? yield(:main) : yield %>
<% end %>
<% end %>
<%= render template: "layouts/lookbook/shell" %>