JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
   <img src="" alt="Detour Bar" id="logo" />

   <ul>
      <li><a href="#" class="nav_btn">BLOG</a></li>
      <li><a href="#" class="nav_btn">PHOTOS</a></li>
      <li><a href="#" class="nav_btn">CALANDER</a></li>
      <li><a href="info.php" class="nav_btn">INFO</a></li>
   </ul>

   <div id="menu_btn" class="nav_btn">
   </div>
</nav>

CSS

nav {
   height: 100%;
   width: 425px;
   padding: 20px 0px 0px 20px;
   background: rgb(255,255,255);
   background: rgba(255,255,255,.5);
   border-right: 7px solid #000;
   position: fixed;
   top: 0px;
   left: 0px;
    }

    nav ul {
   padding: 40px 0px 0px 0px;
   list-style: none;
    }

    nav li {
   padding: 0px 55px 0px 0px;
   text-align: right;
    }

    nav a {
   font-size: 4em;
   color: #000;
    }

    #menu_btn {
   width: 40px;
   height: 161px;
   border: 10px solid #000;
   border-top: 15px solid #000;
   border-bottom: 20px solid #000;
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
   background: rgb(0,0,0);
   background-image: url(img/menu.png);
   background-repeat: no-repeat;
   position: absolute;
   top: 40px;
   right: -60px;
    }

JavaScript

$(document).ready(function() {
        $('.nav_btn').on('click',function() {
         if(!$('.nav_btn').data("ishidden"))
         {
            $('nav').animate({marginLeft: '-245'}, 300);
             $('.nav_btn').data("ishidden",true);    
         }
          else
          {
                $('nav').animate({marginLeft: '245'}, 500);
                $('.nav_btn').data("ishidden",false);    
          }
        });

    });