{% macro sidebar_dropdown(target) %}
<li class="dropdown-header">{% trans %}actions{% endtrans %}</li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="expand" data-target="{{ target }}">{% trans %}expandAll{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="collapse" data-target="{{ target }}">{% trans %}reduceAll{% endtrans %}</a></li>
<li role="separator" class="dropdown-divider"></li>
<li class="dropdown-header">{% trans %}datasource{% endtrans %}</li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="categories" data-target="{{ target }}">{% trans %}category.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="locations" data-target="{{ target }}">{% trans %}storelocation.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="footprints" data-target="{{ target }}">{% trans %}footprint.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="manufacturers" data-target="{{ target }}">{% trans %}manufacturer.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="suppliers" data-target="{{ target }}">{% trans %}supplier.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="devices" data-target="{{ target }}">{% trans %}device.labelp{% endtrans %}</a></li>
<li><a href="#" class="tree-btns dropdown-item" data-mode="tools" data-target="{{ target }}">{% trans %}tools.label{% endtrans %}</a></li>
{% endmacro %}
<ul class="nav flex-column">
<li id="treeBox-categories">
<div class="input-group input-group-sm mb-2 mt-1">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button"
data-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>
</div>
<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">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button"
data-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>
</div>
<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">
<div class="input-group-prepend">
<button class="btn btn-light dropdown-toggle" type="button"
data-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>
</div>
<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>
</ul>