JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
    content
</div>
<div class="navigation">
    <a class="open"><img src=""/></a>
    <div class="hide">
        <a class="close"><img src=""/></a>
        <div class="menu">
            menu
            <a href="#">link1</a>
            <a href="#">link2</a>
            <br><br><br><br><br><br><br>
                ...
            <br><br><br><br><br><br><br>
            <a href="#">link3</a>
            <a href="#">link4</a>
        </div>    
    </div>
</div>

CSS

html,block{
    margin:0px;
    height:100%;
}
.page{
    height:1000px;
}
.navigation{
    position:fixed;
    width:0px;
    top:0px;
    bottom:0px;
    right:0px;
    z-index:10;
}
.navigation>a.open{
    position:absolute;
    display:inline-block;
    top:30px;
    left:-60px;
    cursor:pointer;
    background:#bbb;
}
.navigation>a.open>img{
    width:20px;
    height:20px;
}
.navigation>.hide{
    position:absolute;
    width:0px;
    top:0px;
    bottom:0px;
    right:0px;
    overflow:hidden;
    background:rgba(0,0,0,0.5);
}
.navigation>.hide>a.close{
    position:absolute;
    top:5px;
    left:5px;
    display:inline-block;
    cursor:pointer;
    background:#bbb;
}
.navigation>.hide>a.close>img{
    width:20px;
    height:20px;
}
.navigation>.hide>.menu{
    position:absolute;
    top:30px;
    bottom:5px;
    left:5px;
    right:5px;
    width:190px;
    overflow:auto;
}
.navigation>.hide>.menu>a{
    display:block;
}

JavaScript

$(document).ready(function(){
    $('.navigation>a.open').click(function(){
        $(this).hide();
        $(this).parent().children('.hide').animate({'width':'200px'})
    });
    $('.navigation>.hide>a.close').click(function(){
        $(this).parent().animate({'width':'0px'},function(){
            $(this).parent().children('a.open').show();
        });
    });
});