JSFiddle - React, Tailwind, and code Playground

HTML

<div class="nav">
    <nav>
        <a class="logo"><span><img src="" width="48px" height="15px"></span></a>
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a class="me"></a>
        <a class="me2"></a>
        <a class="me3">&copy;</a>
    </nav>  <!-- end nav -->
   
</div>
<!-- start wrap -->
<div id="wrap"> 

    <div class="navbar">
        <a class="menu-trigger"><img src="img/nav.png" width="25px" height="21px"></a>
    </div>

CSS

.navbar {
  position: fixed;
  z-index: 1000;
  height: 100%;
  width: 60px;
  left: 0px;
  top:0px;
  background-color: red;
  border-right: 1px solid #c6c5c5;

}


.nav {
  position: fixed;
  z-index: 999;
  height: 100%;
  width: 280px;
  left: 0px;
  top: 0px;
  background-color: #fff;
  overflow: hidden;

  -moz-transform: translate(-100%, 0);
  -moz-transition: all 0.5s ease;
  -webkit-transform: translate(-100%,0);
  -webkit-transition: all 0.5s ease;
  -o-transform: translate(-100%,0);
  -o-transition: all 0.5s ease;
  -ms-transform: translate(-100%, 0);
  -ms-transition: all 0.5s ease;

}

nav a {
  display: block;
  padding: 20px 70px;
  text-decoration: none;
  font-size: 20px;
  color: #000;
  border-bottom: 1px solid #ccc;
  font-family: ralewayregular;
  font-size: 14px;
  
}

nav a:hover {
  background-color: #2e2d2d;
  color: #fff;

}
.me:hover {
  background-color: #fff;
  color : #000;
}
.me3:hover {
  background-color: #fff;
  color : #000;
}

.me2:hover {
  background-color: #fff;
  color : #000;
}


nav a:first-child:hover {
  background-color: #fff;

}

.logo {
  height: 50px;
  padding: 15px 90px;
}

nav .me {
  position: absolute;
  bottom: 120px;

}
nav .me2 {
  position: absolute;
  bottom: 60px;
  width: 280px;
  ;
}
nav .me3 {
  position: absolute;
  bottom: 0px;
  width: 280px;
  
}

span {
  position: absolute;
  left: 200px;
  top: 20px;
}

.menu-trigger {
  margin: 15px 15px;
  display: block;
  cursor: pointer;


}
.navbar.active {
    background: blue;
}

JavaScript

$(document).ready(function() {

	var menu = "close";

	$('.navbar').click(function() {
		
		if (menu == "close") {
			
			$('.nav').css({
				
				'-webkit-transform': 'translate(0,0)',
    			'-moz-transform':    'translate(0,0)',
    			'-o-transform':      'translate(0,0)',
    			'-ms-transform':     'translate(0,0)'
				
				});
			menu = "open";
            $(this).addClass('active');
		}
		else{
			
			$('.nav').css({

				
				'-webkit-transform': 'translate(-100%,0)',
    			'-moz-transform':    'translate(-100%,0)',
    			'-o-transform':      'translate(-100%,0)',
    			'-ms-transform':     'translate(-100%,0)'
				
				
				
				
				});
			menu = "close";
             $(this).removeClass('active');
		}

		

	});

});