JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="menu">
    <li><a href="#">Item 1</a>

    </li>
    <li><a href="#">Item 2</a>

    </li>
    <li><a href="#">Item 3</a>

    </li>
    <li><a href="#">Item 4</a>

    </li>
    <li><a href="#">Item 5</a>

    </li>
</ul>
<div class="slide"></div>

CSS

ul {
    position:absolute;
    left:0;
    top:0;
    z-index:1;
}
ul li a {
    display:block;
    padding:5px;
    background:#fff;
    margin-bottom:2px;
}
.slide {
    width: 0;
    border-left: 200px solid #ff5400;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.slide.hover, .slide.active {
    width: 180px;
    background-color: #ddd;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

JavaScript

$("#menu li a").on({
    mouseenter: function () {
        $('.slide').addClass('hover');
    },
    mouseleave: function () {
        $('.slide').removeClass('hover');
    },
    click: function () {
        $('.slide').toggleClass('active');
    }
});

$(document).on('click', function (e) {
    if (!$(e.target).is('.slide') && $('.slide').is('.active')) $('.slide').removeClass('active');
});