JSFiddle - React, Tailwind, and code Playground

by mcannon

HTML

<div id="sidenav" class="span2 sidebar impSidebar">
        <!-- ko foreach: navData -->
	        <!-- ko if: navId===nav.level0() -->
	        <ul class="nav nav-list">
						<li class="level0"><div data-bind="text: displayText"></div></li>
						<!-- ko foreach: level1_links -->	
							<!-- ko if: nav.showLevel2(navId, level2_links.length) -->
								<li data-bind="attr: {class: navId===nav.level1()?'active level1':'level1'}"><a data-bind="attr: { id: navId, class: 'ajax', href: href, title: displayText}" data-replace="#content" ><i class="icon-chevron-down"></i><span class="displayText" data-bind="text: displayText"></span></a></li>
								<!-- <li><div data-bind="attr: { id: navId + '_header' }, text: displayText"></div></li> -->
								<!-- ko foreach: level2_links -->
								<li data-bind="attr: {class: navId===nav.level2()?'active level2':'level2'}"><a data-bind="attr: { id: navId, class: 'ajax', href: href, title: displayText}" data-replace="#content" ><i class="icon-chevron-right"></i><span class="displayText" data-bind="text: displayText"></span></a></li>
								<!-- /ko -->
							<!-- /ko -->
							<!-- ko ifnot: nav.showLevel2(navId, level2_links.length) -->
								<li data-bind="attr: {class: navId===nav.level1()?'active level1':'level1'}"><a data-bind="attr: { id: navId, class: 'ajax', href: href, title: displayText}" data-replace="#content" ><i class="icon-chevron-right"></i><span class="displayText" data-bind="text: displayText"></span></a></li>
							<!-- /ko -->
						<!-- /ko -->
					</ul>
					<!-- /ko -->
				<!-- /ko -->
			</div>

JavaScript

var navData = [
	{"navId": "user_group_maintenance", "displayText": "User/Group Maintenance", "href": "${ctx}/admin/personnel/",
		"level1_links": [
		 	{"navId": "auth_maintenance", 	"displayText": "Authorities Maintenance",		"href": "${ctx}/admin/personnel/authorities/", "level2_links":[]},
			{"navId": "group_maintenance", 	"displayText": "Group Maintenance",					"href": "${ctx}/admin/personnel/group/",
				"level2_links":[
     		 	{ "navId": "group_auth", 			"displayText": "Group Authorities",	"href": "${ctx}/admin/personnel/group/{groupId}/"},
     		 	{ "navId": "group_members", 	"displayText": "Group Members",			"href": "${ctx}/admin/personnel/group_members/{groupId}/"}
				]
			},
			{"navId": "user_maintenance", "displayText": "User Maintenance", "href": "${ctx}/admin/personnel/users/",
				"level2_links":[
     		 	{ "navId": "user_auth", 	"displayText": "User Authorities",	"href": "${ctx}/admin/personnel/users/{username}/"},
     		 	{ "navId": "user_groups", "displayText": "User Groups",				"href": "${ctx}/admin/personnel/users_groups/{username}/"}
				]
			},
		]
	},
	{"navId": "system_maintenance", "displayText": "System Maintenance", "href": "${ctx}/admin/system/",
 		"level1_links": [
 		 	{"navId": "code_table_maintenance", "displayText": "Code Table Maintenance",	"href": "${ctx}/admin/system/codetables/",
				"level2_links":[
     		 	{ "navId": "lookup_maintenance", "displayText": "{tableName}",	"href": "${ctx}/admin/system/codetables/{tableName}/"}
				]
			},
 			{"navId": "organization_config", 			"displayText": "Org Level Configuration",	"href": "${ctx}/admin/system/organization_config/", "level2_links":[]},
 			{"navId": "section_config", 		"displayText": "Section Maintenance",			"href": "${ctx}/admin/system/section_config/",
				"level2_links":[
     		 	{ "navId": "section_attributes_config", "displayText": "{sectionId}",	"href": "${ctx}/admin/system/section_attributes_config/{sectionId}/"}
				]
			},
 			{"navId":...