JSFiddle - React, Tailwind, and code Playground

HTML

<div id="initiate">Test</div>
<div id="nav"><p>testing</p></div>

CSS

#initiate {
  float: left;
}

#nav {
    padding:0px;
    border: 0px solid #ccc;
    float:right;
    right: -320px;
    display:block;
    background-color: #000000 !important;
    box-shadow: -5px 0 5px rgba(174, 174, 174, 0.8);
    width: 320px;
    height: 100%;
    position:fixed;
}

JavaScript

$("#initiate").click( function(event) {
      if ($("#nav").is(":hidden")) {
        $("#nav").stop().animate({
          right: '520px'
        }, 1300);
				}
        else {
          $("#nav").stop().animate({
            right: '320px'
          }, 1300);
        }
        
      });