JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar-hidden"> <i style="font-size: 18px" class="icon-arrow-right"></i>

</div>
<div class="sidebar" style="display: none;">
    <p id="menu-close" style="font-size: 18px; font-weight: bold;">Tools&nbsp;&nbsp;<i class="icon-arrow-left"></i>

    </p>
    <ul>
        <li class="s-b-border"><a href="#"><i class="icon-calendar"></i> Syncro </a>

        </li>
        <li class="s-b-border"><a id="Tool-BoM" href="#"><i class="icon-file"></i> BoM</a>

        </li>
        <li><a href="#"><i class="icon-hdd"></i> Override&nbsp;</a>

        </li>
    </ul>
</div>

CSS

.sidebar-hidden {
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #86c7ff;
    position: absolute;
    padding: 8px;
    margin-left: 0;
}
.sidebar {
    position: absolute;
    padding: 8px;
    margin-left: 0;
    background-color: #86c7ff;
    line-height: 20px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    min-width: 105px;
}
.sidebar:hover {
    display: block;
}
.sidebar ul {
    margin: 0 0 0 5px;
}
.sidebar ul li {
    padding: 4px;
    border-top: dotted 1px;
}
.sidebar ul li:first-child {
    border-top: none;
}
.sidebar ul li a {
    text-indent: 3px;
    text-decoration: none;
    color: black;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    display: block;
}
.sidebar ul li a:hover {
    color: white;
    font-size: 17px;
}

JavaScript

$(function () {
    $(".sidebar-hidden, #menu-close").click(function (e) {
        e.stopPropagation();
        $(".sidebar-hidden").toggle("slow");
        $(".sidebar").toggle("slow");
    });
    $(document).click(function (e) {
        if ($(".sidebar").is(":visible")) {
            $(".sidebar-hidden").toggle("slow");
            $(".sidebar").toggle("slow");
        }
    });
    $(".sidebar").click(function (e) {
        e.stopPropagation();
    });
});