JSFiddle - React, Tailwind, and code Playground

by Angel Komander

HTML

<!-- la Estructura del Menu -->
<div id="sidebar">
  <div id="links">
    <ul id="link_list">
      <a href=""><li>Example</li></a>
      <a href=""><li>Example</li></a>
      <a href=""><li>Example</li></a>
    </ul>
  </div>
  <div id="toggle">
    
  </div>
</div>

CSS

a:link {text-decoration: none; color: #bdc3c7;}
a:visited {text-decoration: none; color: #bdc3c7;}
a:hover {text-decoration: none; color: #bdc3c7;}
a:active {text-decoration: none; color: #bdc3c7;}
 
body {
  background-color: #2c3e50;
  font-family: Helvetica;
  font-size: 22pt;
}
 
#sidebar {
  position: absolute;
  display: block;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: #34495e;
  box-shadow: 5px 5px 10px;
    -webkit-user-select: none; /* Deshabilitamos la Seleccion del Texto */
}
 
#links {
  position: relative;
  float: left;
}
 
#link_list {
  list-style-type: none;
  width: 100%;
  padding: 0px 50px 0px 0px;
}
 
#link_list li {
  display: block;
  width: 100%;
 
}
 
#link_list li:hover {
  background-color: #e74c3c;
}
 
#toggle {
  float: right;
  position: relative;
  top: 50%;
  right: -19px;
  width: 20px;
  height: 20px;
  background-color: #7f8c8d;
  border: 2px solid #ecf0f1;
  border-radius: 20px;
  text-align: center;
  padding: 5px;
  box-shadow: 1px 5px 20px #333333 inset;
}

JavaScript

$("#toggle").click(function(){
  var w = $('#sidebar').width();
  var pos = $('#sidebar').offset().left;
 
  if(pos == 0){
  $("#sidebar").animate({"left": -w}, "slow");
  }
  else
  {
  $("#sidebar").animate({"left": "0"}, "slow");
  }
  
});