JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuWrap">

            <a href="#" class="button"> MENU </a>

            <nav class="menu">
                
                <ul>
                  <li>Lorem ipsum dolor</li>
                  <li>Aenean commodo</li>
                  <li>Aenean massa</li>
                  <li>Lorem ipsum</li>
                  <li>Aenean</li>
                  <li>Aenean massa</li>
                  <li>Lorem ipsum </li>
                  <li>Aenean </li>
                  <li>Aenean massa cum </li>
                </ul>

            </nav>
</div>

CSS

.button {
    display: block;
    background-color: gray;

    height: 50px;
    width: 50px;
}

.menuWrap {
    width: 500px;
    background-color: lightblue;
}
    .menu {
        position: relative;
     /* left:250px; */
        left:0;
        width: 250px;
        background-color: orange;
    }
        .menu ul{
            margin: 0;
            padding: 0;
            list-style:none;
        }

JavaScript

$(document).ready(function () {
    
    $('.button').click(function () {
        $('.menu').toggle(function () {
        
                $(this).animate({left:'250px'}, 300)
            
            }, function () {
        
                $(this).animate({left:'0px'}, 300)
            
            }

            );
        });
});