JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header">	<span class="menu-icon" id="menu-icon">&equiv;</span>

</header>

CSS

#header {

    position: fixed;

    top:0;

    left:0;

    height:50px;

    width:100%;

    z-index:4;

    background-color: #003777;

    -webkit-backface-visibility:hidden;

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

}

.menu-icon {

    float:left;

    width:15%;

    height:50px;

    line-height:50px;

    color:#ffffff;

    font-size:40px;

    text-align: center;

    font-family: Arial;

    border-right:1px solid #003777;

}

.show-left-menu {

    -webkit-transform: translate3d(79%, 0, 0)!important;

    transform: translate3d(79%, 0, 0)!important;

}

JavaScript

document.getElementById('menu-icon').addEventListener('click', showLeftSidebar, false)

function showLeftSidebar(){
        $('header').toggleClass('show-left-menu');
}