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