<%= 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 %>
href="<%= landing_path %>"<% end %> class="flex items-center space-x-3">
<% if project_logo.present? %>
<% elsif project_logo != false %>
<%= lookbook_render :logo, size: 3.7 %>
<% end %>
<% if project_name.present? %>
<%= project_name %>
<% end %>
<% 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,
"x-on:click.stop": "toggleSidebar",
"x-show": "$store.layout.mobile && sidebarHidden",
class: "!text-lookbook-header-text" %>
<% group.with_button icon: :x,
"x-on:click.stop": "toggleSidebar",
"x-show": "$store.layout.mobile && !sidebarHidden",
"x-on:keydown.esc.window": "closeMobileSidebar",
class: "!text-lookbook-header-text" %>
<% end %>
<% end %>
<% end %>
<% end %>