app/components/lookbook/header/component.html.erb in lookbook-1.0.8 vs app/components/lookbook/header/component.html.erb in lookbook-1.1.0
- old
+ new
@@ -1,7 +1,7 @@
<%= render_component_tag :header do %>
- <%= render_component :toolbar, class: "!bg-lookbook-header-bg !text-lookbook-header-text !border-lookbook-header-border" do |toolbar| %>
+ <%= 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? %>
<a
<% if landing_path %>href="<%= landing_path %>"<% end %>
class="text-sm truncate uppercase font-black tracking-wider text-lookbook-branding-text">
@@ -9,60 +9,35 @@
</a>
<% end %>
<% end %>
<% toolbar.section padded: false, align: :right, class: "flex items-center" do %>
- <%= render_component :button_group do |group| %>
+
+ <div x-show="loading" x-cloak>
+ <svg class="animate-spin h-3.5 w-3.5 text-lookbook-header-text opacity-60" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+ </svg>
+ </div>
+
+ <%= 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" do |button| %>
- <% button.dropdown do %>
- <%= tag.div class: "divide-y divide-lookbook-divider min-w-[180px]" do %>
- <div class="px-3 py-3">
- <ul class="space-y-2 opacity-80">
- <li>
- <a href="#"
- class="text-xs flex items-center hover:underline"
- x-data="clipboardComponent"
- @click.prevent.stop="copyToClipboard('#debug-data')">
- <span x-show="copied" x-cloak>
- <%= icon :check, size: 2.5, class: "text-green-600" %>
- </span>
- <span x-show="!copied">
- <%= icon :clipboard, size: 2.5 %>
- </span>
- <span class="ml-2">Copy debug data</span>
- </a>
- </li>
- <li>
- <a href="#"
- class="text-xs flex items-center hover:underline"
- @click.stop="localStorage.clear(); window.location.reload();">
- <%= icon :refresh_cw, size: 2.5 %>
- <span class="ml-2">Reset local storage</span>
- </a>
- </li>
- </ul>
- </div>
- <div class="flex items-center text-xs px-3 py-2 bg-zinc-50">
- <span class="opacity-70 mr-1">Lookbook</span>
- <span class="mr-6">v<%= Lookbook::VERSION %></span>
- <div class="flex items-center space-x-2">
- <a href="https://lookbook.build/guide" target="_blank" class="ml-auto opacity-70" title="Documentation">
- <%= icon :book, size: 3 %>
- </a>
- <a href="https://github.com/allmarkedup/lookbook" target="_blank" class="ml-auto opacity-70" title="Github">
- <%= icon :github, size: 3 %>
- </a>
- </div>
- </div>
- <% end %>
+ <% 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" %>
\ No newline at end of file