JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fon">
<div id="button">
    <div id="s_panel">
        <a href="">Home</a>
    </div>
</div>
<div id="knopka">Кнопка</div>
</div>

CSS

#button {
    position: fixed;
    top: 0px;
    left: 0px;
    background: #ff7700;
    width: 70px;
    height: 70px;
    font: 40px Georgia;
    color: #fff;
    text-align: center;
    border-radius: 0 5px 5px 0;
    background-image: url(http://www.qwa7.net/images/user_upload/homepage.png);
    background-repeat: no-repeat;
    background-position: center;
    }
#s_panel {
    position: fixed;
    top: 0px;
    left: -150px;
    background: #ff7700;
    width: 150px;
    height: 60px;
    padding: 10px 0 0 0;
}
#knopka {
text-decoration:none; 
text-align:center; 
padding:15px; 
border:none; 
color: #fdd453;
font-size:18px;
cursor:pointer;
margin-top: 10px;
background-color:#885; 
}

JavaScript

function fff() {
    $("#s_panel, #button").animate({
        left: "0px"
    }, {
        queue: false,
        duration: 500
    });
    $("#button").animate({
        left: "150px"
    }, {
        queue: false,
        duration: 500
    });
}

function ddd() {
    $("#s_panel").animate({
        left: "-150px"
    }, {
        queue: false,
        duration: 500
    });
    $("#button").animate({
        left: "0px"
    }, {
        queue: false,
        duration: 500
    });
}
$(document).on('click', function(event) {
    if ($(event.target).closest('#button').length) return;
    else if ($(event.target).closest('#knopka').length) fff()
    else ddd()
    event.stopPropagation();
});