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 list for 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 %}

<div class="category-tree-item">
    <div class="d-flex align-items-center">
        <a href="{{ node.url }}"
           class="list-group-item list-group-item-action border-0 py-1 flex-grow-1{% if node.is_active %} active{% endif %}"
           style="padding-left: {{ 0.5 + (level - 1) * 1 }}rem;"
           {% if node.is_active %}aria-current="page"{% endif %}>
            {{ node.name }}
            <small class="text-body-secondary ms-1">({{ node.count }})</small>
        </a>
        {% if has_children %}
            <button class="btn btn-sm btn-link text-body-secondary p-0 px-2 category-tree-toggle"
                    type="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') }}">
                <i class="bi bi-chevron-down small" aria-hidden="true"></i>
            </button>
        {% endif %}
    </div>

    {% 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 %}
</div>