{% import "elements/tree_macros.html.twig" as tree %}


<div class="nav flex-column">

    {{ tree.treeview_sidebar('sidebar-panel-1', 'categories') }}
    {{ tree.treeview_sidebar('sidebar-panel-2', 'devices') }}
    {{ tree.treeview_sidebar('sidebar-panel-3', 'tools') }}

    {# <li id="treeBox-categories">
        <div class="input-group input-group-sm mb-2 mt-1">
            <button class="btn btn-light dropdown-toggle" type="button"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
            ><span class="sidebar-title" id="tree-categories-title">{% trans %}category.labelp{% endtrans %}</span></button>
            <ul class="dropdown-menu" aria-labelledby="dropdownCat">
                {{ _self.sidebar_dropdown('tree-categories') }}
            </ul>
            <input type="search" class="form-control bg-light border-0" id="tree-category-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
        </div>

        <div id="tree-categories" data-tree-search="#tree-category-search"></div>
    </li>
    <li id="treeBox-devices" class="d-sm-none d-md-block">
        <div class="input-group input-group-sm mb-2 mt-2">
            <button class="btn btn-light dropdown-toggle" type="button"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
            ><span class="sidebar-title" id="tree-devices-title">{% trans %}device.labelp{% endtrans %}</span></button>

            <ul class="dropdown-menu" aria-labelledby="dropdownDev">
                {{ _self.sidebar_dropdown('tree-devices') }}
            </ul>
            <input type="search" class="form-control bg-light border-0" id="tree-devices-search" placeholder="{% trans %}search.placeholder{% endtrans %}">
        </div>

        <div id="tree-devices" data-tree-search="#tree-devices-search"></div>
    </li>

    <li id="treeBox-tools">
        <div class="input-group input-group-sm mb-2 mt-2">
            <button class="btn btn-light dropdown-toggle" type="button"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
            ><span class="sidebar-title" id="tree-tools-title">{% trans %}tools.label{% endtrans %}</span></button>

            <ul class="dropdown-menu" aria-labelledby="dropdownTools">
                {{ _self.sidebar_dropdown('tree-tools') }}
            </ul>

            <input type="search" class="form-control bg-light border-0" id="tree-tools-search" placeholder="{% trans %}search.placeholder{% endtrans %}">

        </div>

        <div id="tree-tools" data-tree-search="#tree-tools-search"></div>
    </li> #}
</div>