<style>
.well{
	font-size:11px;
}
</style>
<div class="barra_lateral">


<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
  font-size:11px;

}

.caret {
  cursor: pointer;
  padding:2px;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  font-size: 14px;

}
.caret:hover{
	background-color:green;
	color:white;
}



.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
  margin-top:8px;

}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.nested {
  display: none;
  
}
.nested{
    font-size:12px;
      color:blue;
    
}
.active {
  display: block;
  color:black;
}


</style>

<body>
<span class="text-dark h5">Usuario: </span>
<span class="text-info h5"><?php echo $_COOKIE["usuario"]?></span>
<hr>
<ul id="myUL">




  <li><span class="caret"><img src='../img/edit.png' class="icon"><b>Prestamos</b></span>
    
    <ul class="nested">
      <li><a href="../prestamos/nuevo_prestamo.php"><img src='../img/file.png' class="icon">Nuevo prestamo</a></li>
    <li><a href="../prestamos/prestamos.php"><img src='../img/file.png' class="icon">Consultar prestamos</a></li>
      
    </ul>

  </li>
  
   <li><span class="caret"><img src='../img/balance.png' class="icon"><b>Cobros</b></span>
    <ul class="nested">
      <li><a href="../cobros/cobros.php"><img src='../img/aceptar.png' class="icon">Registrar un cobro</a></li>

       <li><a href="../cobros/reimprimir_ticket.php"><img src='../img/printer.png' class="icon">Reimprimir un cobro</a></li>
       <li><a href="../cobros/anular_cobro.php"><img src='../img/borrar.png' class="icon">Anular cobros</a></li>

      
    </ul>
  </li>

  
   <li><span class="caret"><img src='../img/cliente.png' class="icon"><b>Clientes</b></span>
    <ul class="nested">
      <li><a href="../clientes/clientes.php"><img src='../img/file.png' class="icon">Clientes registrados</a></li>

       <li><a href="../clientes/nuevo_cliente.php"><img src='../img/file.png' class="icon">Crear nuevo cliente</a></li>

	  <li><a href="../clientes/solicitudes.php"><img src='../img/file.png' class="icon">Solicitudes</a></li>
      
    </ul>
  </li>
  
       <li><span class="caret"><img src='../img/caja.png' class="icon"><b>Caja</b></span>
    <ul class="nested">
      <li><a href="../caja/ingresos.php"><img src='../img/file.png' class="icon">Registrar ingreso</a></li>  
      <li><a href="../caja/egresos.php"><img src='../img/file.png' class="icon">Registrar egreso</a></li>

       <li><a href="../cobradores/cobradores.php"><img src='../img/file.png' class="icon">Cuadrar cobrador</a></li>

	  <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Cuadre general</a></li>
      
    </ul>
  </li>
  
       <li><span class="caret"><img src='../img/reporte.png' class="icon"><b>Reportes</b></span>
    <ul class="nested">
    <li><a href="../reportes/rptAtrasos.php"><img src='../img/file.png' class="icon"><font color='red'>Atrasos</font></a></li>
      <li><a href="../reportes/prestamos.php"><img src='../img/file.png' class="icon">Prestamos</a></li>

       <li><a href="../cobradores/cobradores.php"><img src='../img/file.png' class="icon">Clientes</a></li>

	  <li><a href="../reportes/cobros.php"><img src='../img/file.png' class="icon">Cobros</a></li>
           <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Ingresos</a></li>
           <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Egresos</a></li>
            <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Cartera</a></li>
            <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Lista negra</a></li>
    </ul>
  </li>
  
       <li><span class="caret"><img src='../img/aceptar.png' class="icon"><b>Consultas</b></span>
    <ul class="nested">
      <li><a href="../rutas/rutas.php"><img src='../img/file.png' class="icon">Rutas</a></li>

       <li><a href="../cobradores/cobradores.php"><img src='../img/file.png' class="icon">Cobradores</a></li>

	  <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Dispositivos moviles</a></li>
      
    </ul>
  </li>
  

  
       <li><span class="caret"><img src='../img/parametros.png' class="icon"><b>Parametros</b></span>
    <ul class="nested">
      <li><a href="../empresa/empresa.php"><img src='../img/file.png' class="icon">Datos de mi empresa</a></li>
      <li><a href="../rutas/rutas.php"><img src='../img/file.png' class="icon">Rutas</a></li>
      <li><a href="../caja/cajas.php"><img src='../img/file.png' class="icon">Cajas</a></li>

       <li><a href="../cobradores/cobradores.php"><img src='../img/file.png' class="icon">Cobradores</a></li>

	  <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Dispositivos moviles</a></li>
	  
	<li><a href="../usuarios/usuarios.php"><img src='../img/cobrador.png' class="icon">Usuarios del sistema</a></li>
      
    </ul>
  </li>
  
<li><span class="caret"><img src='../img/balance.png' class="icon"><b>Contabilidad</b></span>
    <ul class="nested">
      <li><a href="../cuentas/cuentas.php"><img src='../img/file.png' class="icon">Cuentas</a></li>
      
    </ul>
  </li>
  
  
     <li><span class="caret"><img src='../img/aceptar.png' class="icon"><b>Utiles</b></span>
    <ul class="nested">
      <li><a href="../rutas/rutas.php"><img src='../img/file.png' class="icon">Rutas</a></li>

       <li><a href="../cobradores/cobradores.php"><img src='../img/file.png' class="icon">Cobradores</a></li>

	  <li><a href="../dispositivos/dispositivos.php"><img src='../img/file.png' class="icon">Dispositivos moviles</a></li>
      
    </ul>
  </li>
  
</ul>

<script>
var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".nested").classList.toggle("active");
    this.classList.toggle("caret-down");
  });
}
</script>
</div >

<script>
function ir(url){
	$(".modal").show();
}
</script>