JSFiddle - React, Tailwind, and code Playground

HTML

<div id="initiate">Test</div>
<div id="nav" class="hidden">
  <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").hasClass("hidden")) {
            $("#nav").stop().animate({
                right: '-320px'
            }, 1300);

        } else {
            $("#nav").stop().animate({
                right: '520px'
            }, 1300);
        }
        $("#nav").toggleClass("hidden")
    });