I'm trying to build a sidenav that appears and disappears when the button is clicked. For now it works halfway. When you click the button it opens, if you click it again it closes, but then it never reopens.

Can anyone help me figure out what I'm doing wrong? Sorry, I'm new and I'm trying to learn. So far I have followed the suggestions of stack users and have come to this result.

I appreciate any response, thanks.

Ps: as it is just a test there are some classes that I am not using and that I will have to delete.

    var menu = document.querySelector(".mob_menu_button");
      function mobile_menu(e) {
      
        e.stopPropagation(); 
        var x = document.getElementById("sidenav");
        if (!x.classList.contains("active")) {
          x.classList.add("active");
          menu.innerHTML = "<span>Close Menu<span>";
        } 
      }
      
      document.addEventListener("click", function (e) {
        var x = document.getElementById("sidenav");
        if (e.target.id !== "sidenav" && x.classList.contains("active")) {
          x.classList.add("hide");
          menu.innerHTML = "<span>Open menu</span>";
        }
      });

body {
  background: #686a81;
}

/*Overlay*/
#overlay {
    position: fixed;
    height: 100vh;
    top: 0;
    background: #000;
    z-index: 999;
}

#overlay.bgover {
  left: 0px;
  width: 100%;
  background: #000000d1;
}

/*Toggle Button*/
 .mob_menu_button {
       display: flex;
       align-content: center;
       justify-content: center;
       align-items: center;
       width: 100%;
       background: #282c33!important;
       font-weight: 500!important;
      }

/*Sidebar*/
.sidenav_box {
}

.menu {
  width: 70%;
  padding: 20px;
  background: #fbfbfb;
  box-shadow: 5px 0px 15px 0px #00000021;
  }

#sidenav {
    position: fixed;
    top: 0;
    left:-100%;
    transition: 0.9s;
    z-index: 1000;
}

#sidenav.active {
    left: 0;
    width: 100%;
    background: #00000094; 
}

#sidenav.hide {
    left: -100%; 
}

/*Items menu*/
.user_menu {
    display: flex;
    flex-direction: column;
}

/*Menu header info*/
.display.name {
   font-size: 15px;
   font-weight: 500;
   color: #303238;
}

.display.mail {
    font-size: 13px;
    color: #3d5afe;
}

hr.solid {
    border-top: 1px solid #e0e0e0;
    margin: 10px 0px 10px 0px;
}

/*Text Link css*/
.user_menu.item > a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    color: #75777d;
}

.user_menu.item:hover > a {
    color: #2e323a;
}

.mts_mob_container.active {
        display: flex;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        background: #000000d6;
        height: 100vh;
      }

<button onclick="mobile_menu(event)" >Open menu</button>

<div id="sidenav">
 <div > 
 
 <div >
 {%  if function( 'is_user_logged_in') %}
    <div >
        <span >Ciao [display_name]</span>
        <span >[display_email]</span>
    </div>   
 {% else %}
    <div>prov</div>
            
 {% endif %}
     <hr >  
     
    <div >
        <a href="/account">
         <i ></i>
         <span >Dashboard</span>
        </a>
    </div>
    
     <div >
        <a href="ordini">
         <i ></i>
         <span >I miei ordini</span>
        </a>
    </div>
    
    <div >
        <a href="libreria">
         <i ></i>
         <span >Downloads</span>
        </a>
    </div>
    
    <div >
        <a href="impostazioni">
         <i ></i>
         <span >Impostazioni</span>
        </a>
    </div>
    
    <div >
        <a href="wp-login.php?action=logout">
         <i ></i>
         <span >Logout</span>
        </a>
    </div>
    </div>
  </div>
</div>

CodePudding user response：

you need to add x.classList.remove("active"); instead of x.classList.add("hide"); in

 document.addEventListener("click", function (e) {
        var x = document.getElementById("sidenav");
        if (e.target.id !== "sidenav" && x.classList.contains("active")) {
          x.classList.add("hide");
          menu.innerHTML = "<span>Open menu</span>";
        }
});