<%= render_component_tag :header do %>
<%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
<% toolbar.section padded: true do %>
<% if branding.present? %>
href="<%= landing_path %>"<% end %>
class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
<%= branding %>
<% end %>
<% end %>
<% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
<%= lookbook_render :button_group do |group| %>
<% if @debug_menu %>
<% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text", "x-show": "!loading" do |button| %>
<% menu = lookbook_render :debug_menu,
version: Lookbook::VERSION,
docs_url: "https://lookbook.build/guide",
repo_url: "https://github.com/allmarkedup/lookbook" do %>
<%= helpers.pretty_json(Lookbook.debug_data) %>
<% end %>
<% button.dropdown({}).with_content(menu) %>
<% end %>
<% end %>
<% group.button icon: :menu,
"@click.stop": "toggleSidebar",
"x-show": "$store.layout.mobile && sidebarHidden",
class: "!text-lookbook-header-text" %>
<% group.button icon: :x,
"@click.stop": "toggleSidebar",
"x-show": "$store.layout.mobile && !sidebarHidden",
"@keydown.esc.window": "closeMobileSidebar",
class: "!text-lookbook-header-text" %>
<% end %>
<% end %>
<% end %>
<% end %>