<%= render_component_tag :li,
id: id,
key: "#{id}-directory",
class: "list-none",
"x-show": "!filteredOut",
data: { "entity-type": :directory },
cloak: true do %>
<%= lookbook_tag :button,
key: "#{id}-action",
class: "nav-action",
style: "padding-left: #{left_pad}px",
"x-bind": "bindings.toggle" do %>
<% if children? %>
<%= icon "chevron-down", size: 3, class: "nav-toggle-icon", "x-show": "open", "x-cloak": "true" %>
<%= icon "chevron-right", size: 3, class: "nav-toggle-icon", "x-show": "!open", "x-cloak": "true" %>
<% end %>
<%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
<%= label %>
<% end %>
<% if children? %>
<%= safe_join(children) %>
<% end %>
<% end %>