JSFiddle - React, Tailwind, and code Playground

CSS

.bpen-drawer{
  position:absolute;
  top: 0px;
  height: 100%;
  width: 85px;
  background-color: #63583f; opacity: 0.9;
  transition: 0.5s ease; 
}

.bpen-drawer-left{
  left:-85px;
  border-right: 2px solid #ccc; 
}

.bpen-drawer-right{
  right:-85px;
  border-left: 2px solid #ccc; 
}

.bpen-drawer-left.expanded{
  left: 0px;
}

.bpen-drawer-right.expanded{
  right:0px;
}

.bpen-toggle-pad {
  position:absolute;
 top: 10px; right: 50px; 
 margin-right: 10px;
  width: 25px;
  height:100%;
/*    background-color: brown;  */
  opacity: 1;
  text-align:center;
  cursor:pointer;
   background: url(../images/icon-navicon.png) no-repeat center center;
   background-size: 25px 25px;
  -webkit-transition: 3s ease;
  -moz-transition: 3s ease;
  -o-transition: 3s ease;
  -ms-transition: 3s ease;
  transition: 0.5s ease; 

}

.bpen-toggle-pad-left{
  right: -50px;
  text-align: center;
}

.bpen-toggle-pad-right{
  left : -50px;
  text-align: center;
}

.bpen-toggle-pad-left.expanded{
  right:0px;

}

.bpen-toggle-pad-right.expanded{
/*   top:-50px;  */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 0.2s linear;
  
}

.bpen-drawer-header{
  position:relative;
  height: 30px;
  width:100%;
  top:0px;
  left:0px;
  background-color: #63583f;
}


.bpen-drawer-items{
    list-style-type:  none;
    padding-left: 0px;
    width:100%;
    margin-top:0px;
}

.bpen-drawer-items li{
  padding: 35px 0px 35px 0px;
  width:100%;
  margin: -1px 0px 0px 0px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor:pointer;
  font-size:1.1em;
}

.bpen-drawer-items li a{
  display:block;
  text-decoration:none;
/*   font-weight: bold; */
  color : white;
  padding-left:10px;
  width:100%;
  font-family: Kalam;
	font-size: 15px;
	font-weight: bolder;
	font-variant: small-caps;
	color: #fceece;
}

JavaScript

(function(w){
   if(window.bpen == undefined){
     window.bpen = function(){};
   }

   if(window.bpen.core == undefined){
     window.bpen.core = function(){};
     window.bpen.core.hasClass = function(ele, cls){
       return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
     };
     window.bpen.core.addClass = function(ele, cls){
       if (!bpen.core.hasClass(ele,cls)) ele.className += " "+cls;
     };
     window.bpen.core.removeClass = function(ele, cls){
        if (bpen.core.hasClass(ele,cls)) {
            var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
            ele.className=ele.className.replace(reg,' ').trim();
        }
     };
   }
})(window);


(function(b, window, document){
   function drw(elemId, params) {
     if(drw._drawers.length > 0){
       for(var i = 0; i < drw._drawers.length; i++){
         if(drw._drawers[i]._elemId == elemId){
           return drw._drawers[i];
         }
       }
     }
     var d = new drawer();
     _init(d, elemId, params);
     drw._drawers.push(d);
     return d;
   };
   drw._drawers = [];

   var _init = function(d, id, p){

      d._elemId = id;
      d._container = document.getElementById(id);

      if(p != undefined){
        d._anchor = p.Anchor ? p.Anchor : 'left'
      }

      d._container.className = 'bpen-drawer bpen-drawer-' + d._anchor;
      d._container.addEventListener('click', function(e){e.stopPropagation();}, false);

      _build(d, id, p);

      return d;
   };

   var _build = function(newDrawer,id, p){
    var header = document.createElement('div');
    header.className = 'bpen-drawer-header';
    newDrawer._container.appendChild(header);


    newDrawer._toggle = document.createElement('div');
    newDrawer._toggle.className ='bpen-toggle-pad bpen-toggle-pad-' + newDrawer._anchor;
    (function(drawer){drawer._toggle.addEventListener("click",
            function(e){
              e.stopPropagation();
              drawer.toggle();
            }
        , false);

   ...