JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar" class="sidebar">
  <div class="close-icon">
   Click to close
  </div>
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>  
  </ul>

</div>

<div class="menu-icon">
   Click to show menu
</div>

CSS

.sidebar {
    position: fixed;
    top: 0;
    opacity: 0;
    width: 170px;
    min-height: calc(100vh + 15px);
    background: #222222;
    padding-top: 20px;
    text-align: left;
    box-sizing: border-box;
}
.sidebar ul {
  list-style: none;
  padding: 0;
}
.sidebar ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 30px;
    font-size: 0.75rem;
    letter-spacing: 0.1rem;
    border-bottom: 2px solid #000;
}
.close-icon{
  cursor: pointer;
}
.menu-icon {
    position: relative;
    top: 8px;
    left: 200px;
    padding: 0.25rem 0.75rem;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 1;
}
.menu-icon.clicked {
    opacity: 0;
}
.sidebar.clicked {
    opacity: 1;
}

JavaScript

$(document).ready(function(){
	function showSideBar(e){
  	$('.menu-icon').addClass('clicked').siblings('.sidebar').addClass('clicked');
    e.preventDefault();
  }

  function closeSideBar(e){
    $('.close-icon').parent().removeClass('clicked')
 		.siblings('.menu-icon').removeClass('clicked');
    e.preventDefault();
  }
               
  $('.menu-icon').click(showSideBar);
  $('.close-icon').click(closeSideBar);

  window.addEventListener('mouseup', function(e){
  	var $target = document.getElementById('#sidebar');
    	if(e.target != $target){
      	closeSideBar();
      }
  })
});