JSFiddle - React, Tailwind, and code Playground

by olragon

HTML

<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.min.js"></script>
<div ng-app ng-controller="someCtrl">
    <nav>
    <ul>
        <li ng-repeat="item in menus">
            <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="subitem in item.group">
                            <ng-switch on="subitem.menu != null">
                                <span ng-switch-when="true"><a ng-click="openMenu(subitem.menu.url)">{{subitem.menu.label}}</a></span>
                            </ng-switch>
                        
                            <ng-switch on="subitem.group != null">
                                <span ng-switch-when="true"><div class="group">{{subitem.label}} :
                                    <ul>
                                        <li ng-repeat="subsubitem in subitem.group">
                                            <a ng-click="openMenu(subsubitem.menu.url)">{{subsubitem.menu.label}}</a>
                                        </li>
                                    </ul>
                                </div></span>
                
                            </ng-switch>
                        </li>
                    </ul>
                </div></span>
            </ng-switch>
        </li>
    </ul>
    </nav>
</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

function someCtrl ($scope) {
    
    var infoObj = [{
        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'
       }}
    ];

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

};