JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
</div>

CSS

html, body {
        height:100%;
        font-family: Arial, Verdana, Tahoma;
    }
    #nav {
        width: 50px;
        height:270px;
        position: fixed;
        top: 0px;
        left: 0px;
     /* left: -50px */
        background: #333;
        padding:10px 0 10px 0;
    }

    a {
        padding: 10px;
        text-decoration: none;
        color: #fff;
        font-size: 40px;
        display:block;
    }

JavaScript

$(document).ready(function() {
    var timer, p = $("#nav");
    $(document).on("mousemove", "body", function() {
        console.log(p.position().left);
        if (p.position().left <= -50) 
           p.animate({left:"0px"},30);
        window.clearTimeout(timer);
        timer = setTimeout(function() {
             p.animate({left:"-50px"},30);
        }, 30);
    });
});