<div class="sidebar-item" ng:class="{isRoot: item.isRoot, isTopLevel: item.isTopLevel, hasChildren: item.children.length > 0, active: location.pathname == urlPrefix + item.url}" ng:hide="item.isTopLevel && item.children.length == 0">
    <h5 ng:show="item.isTopLevel">
        {{item.name|translate}}
    </h5>
    <div ng:if="!item.isRoot && !item.isTopLevel">
        <a ng:click="item.expanded = !item.expanded; $event.stopPropagation(); $event.preventDefault()" ng:show="item.children.length > 0" class="expander" href="#">
            <i ng:if="item.expanded" class="fa fa-fw fa-caret-down"></i>
            <i ng:if="!item.expanded" class="fa fa-fw fa-caret-right"></i>
        </a>
        <a ng:href="{{item.url[0] == '/' ? (urlPrefix + item.url) : item.url}}/" ng:mouseup="feedback.emit('sidebar', {id: item.id})" class="link">
            <i class="fa fa-fw fa-{{item.icon}}" ng:show="item.icon.indexOf(' ') < 0"></i>
            <i class="fa-fw {{item.icon}}" ng:show="item.icon.indexOf(' ') > 0"></i>
            {{item.name|translate}}
        </a>
    </div>
    <div class="children" ng:show="item.expanded && item.children.length > 0">
        <div ng:repeat="item in item.isRoot ? item.children : (item.children|orderBy:['weight', 'name'])">
            <ng:include src="'/core:resources/partial/sidebarItem.html'"></ng:include>
        </div>
    </div>
</div>
