<%= render_component_tag :header do %>
<%= lookbook_render :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
<% toolbar.with_section padded: true do %>
<% end %>
<% toolbar.with_section padded: false, align: :right, class: "flex items-center -mt-px" do %>
<%= lookbook_render :button_group do |group| %>
<% if @debug_menu %>
<% group.with_button id: "debug-menu-button",
icon: :help_circle,
class: "!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/ViewComponent/lookbook" do %>
<%= debug_data %>
<% end %>
<% button.with_dropdown.with_content(menu) %>
<% end %>
<% end %>
<% group.with_button icon: :menu,
"@click.stop": "toggleSidebar",
"x-show": "$store.layout.mobile && sidebarHidden",
class: "!text-lookbook-header-text" %>
<% group.with_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 %>