JSFiddle - React, Tailwind, and code Playground

by Leandro Simões

HTML

<nav class="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
  <div class="navbar-toggler animate">
    <span class="menu-icon"></span>
  </div>
  <ul class="navbar-menu animate">

    <li>
      <a href="/PracaInteligente/login" class="animate"> <span class="desc animate"> Sair </span> <span class="glyphicon glyphicon glyphicon-log-out"></span>
      </a>
    </li>
  </ul>
</nav>

JavaScript

// Objeto JSON retornado do servidor
var jsonObject = {
	items: [
  	{
    	onclickFunctions: ['displayPracaRamos', 'displayPracaCidadeMilao'],
      icon: 'glyphicon-tree-deciduous',
      title: 'Praças'
    },    
  	{
    	onclickFunctions: ['displayCameraCasteloBranco1', 'displayCameraCasteloBranco2'],
      icon: 'glyphicon-camera',
      title: 'Cameras'
    },    
  	{
    	onclickFunctions: ['displayAlarmsMarker'],
      icon: 'glyphicon-alert',
      title: 'Ocorrências'
    },    
  	{
    	onclickFunctions: ['showPois'],
      icon: 'glyphicon-map-marker',
      title: 'POIS'
    },    
  	{
    	onclickFunctions: [],
      icon: 'glyphicon-pushpin',
      title: 'Minha Localização'
    },    
  	{
    	onclickFunctions: ['toggleFullScreen'],
      icon: 'glyphicon-fullscreen',
      title: 'Tela Inteira'
    }
  ]
};

// Funções que serão atribuídas aos itens do menu
var menuFunctions = {
	'displayPracaRamos': function(data) {  
    console.log('displayPracaRamos:');
    console.log(data); // Aqui vc faz o que quiser com o item
  },
	'displayPracaCidadeMilao': function(data) {  
    console.log('displayPracaCidadeMilao:');
    console.log(data); // Aqui vc faz o que quiser com o item
  },
	'displayCameraCasteloBranco1': function(data) {  
    console.log('displayCameraCasteloBranco1:');
    console.log(data); // Aqui vc faz o que quiser com o item
  },
	'displayCameraCasteloBranco2': function(data) {  
    console.log('displayCameraCasteloBranco2:');
    console.log(data); // Aqui vc faz o que quiser com o item
  },
	'displayAlarmsMarker': function(data) {  
    console.log('displayAlarmsMarker:');
    console.log(data); // Aqui vc faz o que quiser com o item
  },
	'displayAlarmsMarker': function(data) {  
    console.log('displayAlarmsMarker:');
    console.log(data); // Aqui vc faz o que quiser com o item
  },
	'showPois': function(data) {  
    console.log('showPois:');
    console.log(data); // Aqui vc faz o que quiser com o item
 ...