wc-bootstrap/templates/global/category-tree-node.html.twig

{#
 # Single Category Tree Node (recursive)
 #
 # Renders one category as a list-group-item-action link with optional
 # collapsible nested children. Included recursively.
 #
 # Expected context:
 #   node  - Category node from wc_bootstrap_get_category_tree()
 #   level - Current nesting depth (1-3)
 #
 # @package WcBootstrap
 # @since 0.1.7
 #}

{% set has_children = node.children is not empty %}
{% set is_open = node.is_active or node.is_ancestor %}

<a href="{{ node.url }}"
   class="list-group-item list-group-item-action border-0 py-1 d-flex align-items-center{% if node.is_active %} active{% endif %}"
   style="padding-left: {{ 0.75 + (level - 1) * 1 }}rem;"
   {% if node.is_active %}aria-current="page"{% endif %}>
    <span class="flex-grow-1">{{ node.name }}</span>
    <small class="text-body-secondary ms-1">({{ node.count }})</small>
    {% if has_children %}
        <span class="category-tree-toggle ms-1"
              role="button"
              data-bs-toggle="collapse"
              data-bs-target="#cat-{{ node.term_id }}"
              aria-expanded="{{ is_open ? 'true' : 'false' }}"
              aria-controls="cat-{{ node.term_id }}"
              aria-label="{{ __('Toggle subcategories', 'wc-bootstrap') }}"
              onclick="event.preventDefault(); event.stopPropagation();">
            <i class="bi bi-chevron-down small" aria-hidden="true"></i>
        </span>
    {% endif %}
</a>

{% if has_children %}
    <div class="collapse{{ is_open ? ' show' : '' }}" id="cat-{{ node.term_id }}">
        {% for child in node.children %}
            {% include 'global/category-tree-node.html.twig' with { node: child, level: level + 1 } only %}
        {% endfor %}
    </div>
{% endif %}