JSFiddle - React, Tailwind, and code Playground

by holoverse

HTML

<div id='sidebar'>

Test content
<a href='#' class='menuLinks'>Test link</a><br/>
<a href='#' class='menuLinks'>Test link</a><br/>
<a href='#' class='menuLinks'>Test link</a><br/>
<a href='#' class='menuLinks'>Test link</a><br/>
</div>

CSS

#sidebar {
  background:black;
  color:white;
  height:400px;
  width:330px;
  float:left;
}

JavaScript

var sideBarOpen=false;     
$('#sidebar').css('margin-left', '-300px');
var openSideBar = function(){
   sideBarOpen = true;
   $('#sidebar').css('margin-left', '0');
   $('#sidebar .arrow').removeClass('dir-two');
   $('#sidebar .arrow').addClass('dir-one');
   $('#content').css('padding-left', '0');
}

var closeSideBar = function(){
   sideBarOpen=false;
   $('#sidebar').css('margin-left', '-300px');
   $('#sidebar .arrow').addClass('dir-two');
   $('#sidebar .arrow').removeClass('dir-one');
   $('#content').css('padding-left', '300px');
}

$( document ).click(function( event ) {
    console.log(event);
   var target = $( event.target );
	 var menulinks = $('.menuLinks');
   if(target.is( '#sidebar' ) || target.is('.menuLinks')){
       openSideBar();
   } else {
     if(sideBarOpen){
      closeSideBar();
     }
   }
});