JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menuLayout">
    <a href="#menuLayout" id="openMenuLayout">
        <img class="toggleBtn" src='http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/32/Timeline-List-Grid-List-icon.png' />
        <img class="toggleBtn" src="http://seotobiz.com/images/icon_close.png" style='display:none;'/></a>
    <nav id="menuLayoutList">
      <ul>
        <li>
            <form id="search">
              <input type="search" placeholder="Search...">
            </form>
        </li>
        <li><a href="#homeLayout">Home</a></li>
        <li><a href="#aboutLayout">About Us</a></li>
        <li><a href="#KeyLayout">Key Facts</a></li>
        <li><a href="#teamLayout">Team</a></li>
        <li><a href="#">Register</a></li>
        <li><a href="#contactLayout">Contact</a></li>
      </ul>
    </nav>
  </div>

CSS

#menuLayout {
display: block;
position: fixed;
width: 280px;
height: 100%;
z-index: 99;
top: 0;
left: -280px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
transition: left 0.2s ease-in-out;
-ms-transition: left 0.2s ease-in-out;
-o-transition: left 0.2s ease-in-out;
-moz-transition: left 0.2s ease-in-out;
-webkit-transition: left 0.2s ease-in-out;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
-webkit-transform: translate(0px, 0px);
background-color: #b11c1c;
background-image: -moz-linear-gradient(center top , #b11c1c, #AD3335);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b11c1c), to(#AD3335));
background-image: -webkit-linear-gradient(top, #b11c1c, #6A0001);
background-image: -o-linear-gradient(top, #b11c1c, #6A0001);
background-image: linear-gradient(to bottom, #b11c1c, #6A0001);
background-repeat: repeat-x;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffb11c1c', endColorstr='#ffAD3335', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}

#openMenuLayout {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
width: 32px;
height: 32px;
font-size: 16px;
color: #FFF;
line-height: 32px;
text-align: left;
z-index: 999;
top: 20px;
right: -52px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

img {
max-width: 100%;
}

#menuLayout.open-menu {
left: 0;
}

#menuLayout.open-menu #openMenuLayout {
left: 20px;
right: auto;
}
nav#menuLayoutList {
position: relative;
margin: 70px 0;
}

nav#menuLayoutList ul {
position: relative;
margin: 0;
}

JavaScript

$("#openMenuLayout").click(function(e){
        if ($('#menuLayout').hasClass('open-menu')){
            $('#menuLayout').removeClass('open-menu');
            $('#openMenuLayout').find('img').removeClass().addClass('opened_icon');
            $(this).css('display','block');
        } else {
            $('#menuLayout').addClass('open-menu');
            $('#openMenuLayout').find('img').removeClass().addClass('open-menu_icon');
            $(this).css('display','block');
        }  
        e.preventDefault();
 });


$(document).mouseup(function (e)
{
    var container = $("nav#menuLayoutList");
    console.log(e.target.nodeName);
    if (!container.is(e.target) 
        && container.has(e.target).length === 0 
        && e.target.nodeName != "IMG")
    {
        $('#menuLayout').removeClass('open-menu');
    } 
});