JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    Estágio    
    <div class="mais"></div>
</div>
<div class ="parent">     
    <div class="content">        
        <div id="map_canvas" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="nav"><div class="fechar">X</div><div id="dadosDiv"></div></div>   
</div>

CSS

.header{
    background-color: Orange;
    height: 65px;
}

.nav{
    background-color: #8EAEC1;
    position:absolute;
    width: 235px;
    right:0px;
    top:0px;    
    bottom:0px; 
    text-align:left;
    padding-left:16px;       
    padding-top:16px;
}

.content{
    /*background-color: Purple;*/
    position:absolute; 
    /*left:235px;*/
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
}

.parent{
    margin-top:65px;
    position:absolute; 
    top:0px; 
    left:0px;
    right:0px; 
    bottom:0px;
}

.mais
{  
    position:absolute;
    width: 32px;
    right:8px;
    top:0px;    
    bottom:0px;        
    background: url('../images/info_black.png') no-repeat 0px 10px;    
     cursor:pointer;
}

.fechar
{  
    position:absolute;
    width: 16px;
    height: 16px;
    right:16px;
    top:8px;    
    bottom:0px;        
    background: url('../images/close.png') no-repeat 0px 0px;    
    cursor:pointer;
}

JavaScript

$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
        $('.mais').click( function() {
            var status = $(".nav").attr("hidden");
            if (status)
            {
                $(".nav").attr("hidden",false);
            }
            else
            {
                $(".nav").attr("hidden",true);
            }
        });