JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    Hello menu!
    <div id="menu"></div>
</div>

CSS

#container {
    width: 300px;
    height: 300px;
    position: relative;
    background: yellow;
}
#menu {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: red;
}

JavaScript

$(document).ready(function () {
    $("#menu").on("click", function (e) {
         e.stopPropagation();
        if ($(this).hasClass("opened")) {
            $(this).animate({left: "0px"}, 600);
            $(this).removeClass("opened");
        } else {
            $(this).animate({left: "150px"}, 600);
            $(this).addClass("opened");
        }
      });
    $("#container").on("click", function(){
        if($("#menu").hasClass("opened")){
            $("#menu").animate({left: "0px"}, 600);
            $("#menu").removeClass("opened");
        }
    });
});