<%= render_component_tag :header do %>
<%= render_component :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 %>
<%= render_component :button_group do |group| %>
<% if @debug_menu %>
<% group.button icon: :help_circle, class: "opacity-50 hover:opacity-100 transition !text-lookbook-header-text" do |button| %>
<% button.dropdown do %>
<%= tag.div class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
Lookbook
v<%= Lookbook::VERSION %>
<% end %>
<% end %>
<% 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 %>