JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<script type="text/ng-template" id="my-tmpl">
                <div ng-click="$parent.selectedMenu = $parent.selectedMenu == data ? null : data">{{ data.title }}</div>
                <ul class="list" ng-show="$parent.selectedMenu==data" ng-if="data.nodes">
                    <li class="list__item"  ng-repeat="data in data.nodes">
                        <a ng-href="{{ data.url }}">
                            <i class="list__item--icon {{ data.icon }}"></i>
                            <span class="list__item--text">{{ data.title }}</span>
                        </a>
                    </li>
                </ul>
            </script>

<ul ng-controller="TreeController" ng-show="$parent.selectedMenu==data">
    <li ng-repeat="data in pages" ng-include="'my-tmpl'"></li>
</ul>

JavaScript

angular.module("myApp", []).
controller("TreeController", function($scope) {
    
    $scope.pages = [
        {
            "id" : 0,
            "title" : "Home",
            "icon" : "mdi-action-home",
            "url" : "/"
        },
        {
            "id" : 1,
            "title" : "Basics",
            "icon" : "mdi-maps-place",
            "url" : "#",
            "nodes" : [
                {
                    "id" : 1,
                    "title" : "Introduction",
                    "icon" : "mdi-maps-place",
                    "url" : "#/1"
                }
            ]
        }
        ]
});