JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<span style="font-size:30px;cursor:pointer" id="Open_Sidenav">&#9776; open</span>

        <!-- Side Navigation -->
        <div id="mySidenav" class="sidenav">
            

            <div class="sidenav-head">
                <div class="close" id="Close_Sidenav">
                    fechar
                </div>
                <div class="sidenav-head-txt">
                   texto texto
                </div>
            </div>
            
            <div class="sidenav_menu">MENU 1
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>
            
            <div class="sidenav_menu">MENU 2
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>
            
            <div class="sidenav_menu">MENU 3
                <ul>
                    <li>Item 1</li>
                    <li>Item 2</li>
                    <li>Item 3</li>
                    <li>Item 4</li>
                </ul>
            </div>
            
        </div>

CSS

.context_menu, .sidenav_menu { 
    padding: 12px 8px;
    cursor: pointer;
    display: block; 
    color: #484848;
    border-left: 7px solid #FFFFFF;
}
.context_menu:hover, .sidenav_menu:hover { 
    background: #EEEEEE; 
    border-left: 7px solid #0091FF;
}

.sidenav {
    height: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    overflow-x: hidden;
    z-index: 9999;
}
.sidenav .sidenav-head {
    top: 0;
    height: 169px;
    width: 300px;
    background-image: url("../Img/bg-sidenav.png");
}
.sidenav .sidenav-head .close {
    cursor: pointer;
}
.sidenav-head-txt {
    color: #FFFFFF;
    margin: 10px;
    background-color: #000;
}
.sidenav_menu ul {
    display: none;
}
.sidenav_menu ul li { 
    margin-left: -30px;
    padding: 12px 8px;
    cursor: pointer;
    display: block; 
    color: #484848;
    border-left: 7px solid #EEEEEE;
}
.sidenav_menu ul li:hover { 
    background: #EEF2F5; 
    border-left: 7px solid #FBBC05;
}


/* Mobile */
@media only screen and (max-width: 550px) {

    .sidenav .sidenav-head .close {
        cursor: none;
    }
    .sidenav_menu {
        padding: 22px 8px;
    }
}

JavaScript

$(document).ready(function() {

    // Inicia variáveis
    var menuAberto = false;

    // Fecha Sidenav
    $("#Close_Sidenav").click(fechaSideNav);
    
    function fechaSideNav() {
        $("#mySidenav").hide();
        $(".shadow-full").hide();
        menuAberto = false;
    }
    
    // Verifica se o menu esta aberto
    $(document).click(function (e) {
        if (!menuAberto) {
            return;
        }
        var foraMenu = !$(e.target).closest('#mySidenav')[0];
        if (foraMenu) {
            fechaSideNav();
        }
    });

    // Abre Sidenav
    $("#Open_Sidenav").click(function (e) {
        e.stopPropagation();
        $("#mySidenav").toggle(2000);
        menuAberto = true;
        $("body").append('<div class="shadow-full"></div>');
    });
  
    // Abre sub menu
    $(".sidenav_menu").click(function() {
        $(".sidenav_menu ul").hide();
        $(this).find("ul").slideToggle();
    });
});