JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <leftnav pins="true" collapsable="true" labels="true"></leftnav>
</div>

CSS

ul
{
    background: yellow;
}

.first-level {
    background: red;
}

.second-level
{
    background: green;
}

.third-level {
    background: blue;    
}

.testClass {
    background: black;
    color: white;
}

JavaScript

var module = angular.module("test", []);
module.directive('leftnav', function () {
    return {
        restrict: 'E',
        template: '<div class="leftnav"><ul class="clear ecue-leftmenus" ng-transclude><first-level-item ng-repeat="item in items" item="item"></first-level-item></ul></div>',
        replace: true,
        transclude: true,
        scope: false,
        link: function (scope, element, attrs) {
            console.log("treeview directive loaded");
        },
        controller: function ($scope, $rootScope) {
            $rootScope.selected = -1;
            $rootScope.select = function(item) {
                if ($rootScope.selected === item) {
                    $rootScope.selected = -1;
                }else {
                    $rootScope.selected = item
                    console.log($rootScope.selected);
                }
              }
              $rootScope.isSelected = function(item) {
                return $rootScope.selected == item
            };
            $rootScope.collapse = function(item) {
                if ($rootScope.collapsed === item) {
                    $rootScope.collapsed = -1;    
                }else {
                    $rootScope.collapsed = item
                    console.log($rootScope.collapsed);
                }
              }
              $rootScope.isCollapsed = function(item) {
                return $rootScope.collapsed == item
            };
            $rootScope.depth = 0;
            $scope.items = [
                {   id: "Presidente",
                 name: "Presidente",
                 iconClass: "icon vipricon-dashboard",
                 children: [
                     { name: "Dilma" },
                     { name: "Aécio" },
                     { name: "Marina" },
                     { name: "Luciana Genro" }
                 ]
                },
                {   id: "Governador",
                 name: "Governador",
                 iconClass: "icon vipricon-dashboard",
   ...