<%= 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 %>
<%= icon nil,
size: 3,
class: "nav-toggle-icon",
"x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
<%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
<%= label %>
<% end %>
<% if children? %>
<%= safe_join(children) %>
<% end %>
<% end %>