JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<div ng-app="myApp">

<script type="text/ng-template" id="menu_item_renderer.html">
    <ng-switch on="item.menu != null">
        <span ng-switch-when="true">
            <a ng-click="openMenu(item.menu.url)">{{item.menu.label}}</a>
        </span>
    </ng-switch>
    <ng-switch on="item.group != null">
        <span ng-switch-when="true">
            <div class="group">{{item.label}} :
                <ul>
                    <li ng-repeat="item in item.group" ng-include="'menu_item_renderer.html'"></li>
                </ul>
            </div>
        </span>
    </ng-switch>
</script>
    
<div ng-controller="someCtrl">
   <nav>
    <ul>
        <li ng-repeat="item in menus" ng-include="'menu_item_renderer.html'"></li>
    </ul>
    </nav>
</div>
</div>

CSS

nav{
    width: 280px;
    margin: 10px;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
nav div.group {
    margin: 10px 0;
}
nav li {
    border: 0 none;
    padding: 1px 3px;
    list-style: none;
    margin-bottom: 4px;
}
nav ul ul li {
    padding-left: 20px;
}
nav a {
    display: block;
    margin: 0;
    cursor: pointer;
    padding: 2px 4px;
    background-color: #eee;
}
nav a:hover {
    text-decoration: underline;
    background-color: #eae;
}

JavaScript

angular.module("myApp", []).
controller("someCtrl", ['$scope', function($scope) {

    $scope.openMenu = function(url) {
        alert(url)
    };

    $scope.menus = [
       {
        label: "In the news",
        group: [{
            menu: {
                url: 'news.html',
                label: 'News'
            }},
        {
            label: 'Press Releases',
            group: [{
                menu: {
                    url: 'press.html',
                    label: 'Recent'
                }},
            {
                menu: {
                    url: 'press_archive.html',
                    label: 'Archive'
                }}]}]
       },
       {
        menu: {
            url: 'mission.html',
            label: 'Our mission'
        }},
       {
        menu: {
            url: 'about.html',
            label: 'About us'
        }}
    ];

}]);