[FIXED] Why Javascript menu opens only once when you click on the button?

Issue

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)" class="mob_menu_button">Open menu</button>

<div id="sidenav">
 <div class="sidenav_box"> 
 
 <div class="menu">
 {%  if function( 'is_user_logged_in') %}
    <div class="user_menu header">
        <span class="display name">Ciao [display_name]</span>
        <span class="display mail">[display_email]</span>
    </div>   
 {% else %}
    <div>prov</div>
            
 {% endif %}
     <hr class="solid">  
     
    <div class="user_menu item">
        <a href="/account">
         <i class="icn_menu fa-regular fa-user"></i>
         <span class="link_text">Dashboard</span>
        </a>
    </div>
    
     <div class="user_menu item">
        <a href="ordini">
         <i class="icn_menu fa-regular fa-basket-shopping"></i>
         <span class="link_text">I miei ordini</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="libreria">
         <i class="icn_menu fa-regular fa-cloud-arrow-down"></i>
         <span class="link_text">Downloads</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="impostazioni">
         <i class="icn_menu fa-regular fa-gear"></i>
         <span class="link_text">Impostazioni</span>
        </a>
    </div>
    
    <div class="user_menu item">
        <a href="wp-login.php?action=logout">
         <i class="icn_menu fa-regular fa-arrow-right-from-bracket"></i>
         <span class="link_text">Logout</span>
        </a>
    </div>
    </div>
  </div>
</div>

Solution

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>";
        }
});

Answered By - aziz k'h

Answer Checked By - Timothy Miller (PHPFixing Admin)