JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap-content">
    <div id="menubar">
      <nav role="navigation" class="menubar-scroll">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
        </ul>
      </nav>
    </div>
<div class="swipe-area"></div>
<button type="button" class="navbar-toggle" data-toggle="menubar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
</button>
</div>

CSS

.wrap-content #menubar {
  z-index: 200;
  width: 240px;
  height: 92vh!important;
  background: #2c3e50;
  border: 1px solid #f00;
  left: -240px;
  position: fixed;
  overflow: hidden;
  margin-top: 51px !important;
  padding-right: 10px;
  padding-left: 10px;
  transition: left 600ms cubic-bezier(0.4, 0.21, 0.13, 0.99);
  opacity: 0.9;
  -moz-box-shadow: 9px 0 5px 0 rgba(0, 0, 0, 0.49);
  -webkit-box-shadow: 9px 0 5px 0 rgba(0, 0, 0, 0.49);
  box-shadow: 9px 0 5px 0 rgba(0, 0, 0, 0.49);
}
.wrap-content .open-menubar {
  z-index: 200;
  width: 240px;
  height: 92vh!important;
  background: #2c3e50;
  border: 1px solid #f00;
  left: -240px;
  position: fixed;
  overflow: hidden;
  margin-top: 51px !important;
  padding-right: 10px;
  padding-left: 10px;
  transition: left 600ms cubic-bezier(0.4, 0.21, 0.13, 0.99);
  opacity: 0.9;
  -moz-box-shadow: 9px 0 5px 0 rgba(0, 0, 0, 0.49);
  -webkit-box-shadow: 9px 0 5px 0 rgba(0, 0, 0, 0.49);
  box-shadow: 9px 0 5px 0 rgba(0, 0, 0, 0.49);
  left: 0px;
}
.wrap-content .open-menubar .menubar-scroll {
  height: 100%;
  overflow: auto;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
}
@media (min-width: 768px) {
  .wrap-content .open-menubar {
    display: none!important;
  }
}
.swipe-area {
  position: absolute;
  width: 30px;
  left: 0;
  top: 0;
  height: 100%;
  background: #f3f3f3;
  z-index: 200;
}

JavaScript

$(document).ready(function(){
  $("[data-toggle]").click(function(){
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass(".open-menubar");
  });
  $("swipe-area").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers)
    {
      if (phase=="move" && direction =="right") {
        $("menubar").addClass(".open-menubar");
        return false;
      }
      if (phase=="move" && direction =="left") {
        $("menubar").removeClass(".open-menubar");
        return false;
      }
    }
  });
});