JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="side-menu">
            <ul>
            <li><img src="http://studioambiance.net/wp-content/uploads/2012/03/demo.jpg"></img></li>

            </ul>

  </div>
    
</div>

CSS

#container{
    background-color:#fcc;
    height:400px;
}
#side-menu {
    display:block;
    z-index:20;
    position:fixed;
    right:0;
    top:76px;
}

JavaScript

jQuery(function($) {
    var $sideMenu = $('#side-menu'),
        itemClicked = false; // Use to determine whether an item was clicked

    $sideMenu.hide();
    
    // Catch clicks on the document
    $(document.body).click(function(e) {

        // Check if the menu is visible
        if (!$sideMenu.is(':visible')) {
            $sideMenu
                .stop(true) // Cancel any animation from a previous click
                .show(); // Show the menu

            // Set a timer to hide the menu after 5 seconds if nothing was clicked
            setTimeout(function() {
                if (!itemClicked) {
                    $sideMenu.slideUp(); // Hide the menu with the slideUp effect
                }
                itemClicked = false; // Reset the flag for next time round
            }, 1000); 
        }
    });

    // Catch clicks on menu items
    $sideMenu.click(function(e) {
        itemClicked = true;
    });
});