<div id="bars" onclick="toggleSidebar(this);">
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="sidebar">
  <ul>
    <li><a href="#"><i class="fa fa-home"></i></a></li>
    <li><a href="#"><i class="fa fa-search"></i></a></li>
    <li><a href="#"><i class="fa fa-envelope"></i></a></li>
    <li><a href="#"><i class="fa fa-gear"></i></a></li>
    <li><a href="#"><i class="fa fa-power-off"></i></a></li>
  </ul>
</div>
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
* {
  margin:0px;
  padding:0px;
}
#sidebar {
  position:fixed;
  width:100px;
  height:100vh;
  background:#151719;
  left:-100px;
  transition:all 300ms ease;
}
#sidebar.active {
  left:0px;  
}
#sidebar ul {
  text-align:center;
  position:relative;
  top:48%;
  transform:translateY(-50%);
}
#sidebar ul li {
  list-style:none;
  width:70px;
  padding:12px 0px;
  text-align:center;
  border:1px solid #eee;
  margin:20px auto;
  font-size:25px;
  transition:all 300ms ease;
}
#sidebar ul li a {
  color:#eee;
}
#sidebar ul li:hover  {
   border-color:orangered; 
}
#sidebar ul li:hover a {
   color:orangered; 
}

#bars {
  position:fixed;
  top:15px;
  left:0px;
  width:100px;
  z-index:2;
  height:60px;
}
#bars span {
  position:relative;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width:60px;
  height:6px;
  background:orangered;
  margin:10px 0px;
  transition:transform 400ms ease-in-out;
  cursor:pointer;
}
#bars.active span {
  background:#eee;
}
#bars.active span:nth-child(1) {
  top:10px;
  left:17px;
  width:25px;
  transform:rotate(-40deg);
}
#bars.active span:nth-child(3) {
  top:-10px;
  left:17px;
  width:25px;
  transform:rotate(40deg);
}
function toggleSidebar(ref){
  document.getElementById("sidebar").classList.toggle("active");
  ref.classList.toggle("active");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.