<ul class="nav flex-column left_main">
  <li class="nav-item">
    <a class="nav-link <%= 'selected' if @selected == "temperature" %>" data-action="temperature_generate">
      <span style="cursor: pointer"><%= _("Temperatura") %></span>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link <%= 'selected' if @selected == "speed" %>" data-action="speed_generate">
      <span style="cursor: pointer"><%= _("Velocidad") %></span>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link <%= 'selected' if @selected == "engine_usage" %>" data-action="engine_usage_generate">
      <span style="cursor: pointer"><%= _("Tiempo de motor") %> </span>
    </a>
  </li>

  <li class="nav-item">
    <a class="nav-link <%= 'selected' if @selected == "fuel_consumption" %>" data-action="fuel_consumption_generate">
      <span style="cursor: pointer"><%= _("Consumo de combustible") %> </span>
    </a>
  </li>
</ul>

<script>
  $(".left_main .nav-link").click(function(){
      $(".nav-link.selected").removeClass("selected");
      $(".data_config.show").removeClass("show");
      $(".data_config").removeClass("hide");
      $(".data_config").addClass("hide");

      $(this).addClass("selected");
      $("#" + $(this).attr("data-href")).addClass("show");

  });
</script>

<style>
  .data_config.hide{
    display: none;
  }

  .data_config.show{
    display: block;
  }
</style>
