JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation-wrap">
    <h1>Hello</h1>
</div>

<span data-toggle=".container" id="sidebar-toggle"> Click
</span>

CSS

.navigation-wrap{
    color:red;
    position:relative;
    height:100%;
    width:100%;
}
.open-sidebar{
    color:blue;
}
.sidebar-toggle{
    position:absolute;
    top:0;
    right:100px;
}

.navigation-wrap:after{
    content: attr(menu-overlay);
    position:absolute;
    top:0;
    bottom:0;
    left: 0;
    right:0;
    width: 100%;
    height: 100%;
    background: rgba(6,16,35,0);
    z-index:0;
    cursor: pointer;
    background:transparent;
  }

.open-sidebar:after{
    background:black;
}

JavaScript

$('[data-toggle]').click(function() {
$(this).toggleClass('active');
    var toggle_el = $(this).data('toggle');
    $(toggle_el).toggleClass('open-sidebar');
    $('.navigation-wrap').toggleClass('open-sidebar');
    $('.header').toggleClass('open-sidebar');

        if($('.open-sidebar').is(':visible')){
            $('.navigation-wrap').attr('menu-overlay').bind('click', function(){
             $(this).removeClass('open-sidebar');
          });
        }

  });