JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
<script id="settings-template" type="text/x-handlebars-template">
<div id="settings-title">Administration</div>

<hr />

<div id="settings-top-tabs">
	{{#each tabs}}
		<a href="{{url}}/{{@key}}" tab="{{@key}}">{{name}}</a>
	{{/each}}
</div>

<hr />

<div id='settings-main'>
	<div id="settings-left-tabs">
		{{#each subTabs}}
		<a href="{{../url}}/{{../tab}}/{{@key}}" tab="{{@key}}">{{this}}</a>
		{{/each}}
	</div>

	<div id="settings-content"></div>
</div>
</script>

<div id="settings"></div>

JavaScript

var tabs = {
    general: {
        name: "General",
        subTabs: {
            site: {
                name: "Site",
                tabs: {
                    information: "Information"
                }
            },
            rules: {
                name: "Rules Engine"
                tabs: {
                rules: "Rules",
                email: "Email Templates"
            }
        }
    }
},
    tools: {
        name: "Tools",
            subTabs: {
                tab1: "Tab 1",
                    tab2: "Tab 2"
            }
    },
        clientbeta: {
            name: "Client Beta",
                subTabs: {
                    tab1: "Tab 1",
                        tab2: "Tab 2"
                }
        },
            bibeta: {
                name: "BI Only",
                    subTabs: {
                        config: "Rules Configuration",
                            email: "Email Templates"
                    }
            }
};

var source   = $("#settings-template").html();
var template = Handlebars.compile(source);
/*
var tab = "general";
			if(tabs[tab]) {
				$('#settings').append(template({
					tab: tab,
					tabs: tabs,
					subTabs: tabs[tab].subTabs,
					url: "settings"
				}));

			}*/