side nav unable to retreat

Question

I have the following side navigation that is unable to retreat back when I click the button, although it can appear. The same button is used to open and close the side navigation.

I found similar threads in this forum and I am using the same code provided by some of the people, however, it doesn't seem to work in my situation.

I am also trying to change the shape of the button from ☰ to X in the same function that is extending/retreating the side Nav.

The button is able to change the shape everytime though.

Thanks for helping!

HTML:

<div class = "icon" onclick = "Change(this)"> <!-- start of menu icon -->
   <div class = "bar1"></div>
   <div class = "bar2"></div>
   <div class = "bar3"></div>                
</div>                                      <!-- end of menu icon -->


<div id = "mysideNav" class = "sideNav"> <!-- start of side navigation -->
    <a href = "#"> About the bank </a>
    <a href = "#"> Mission </a>
    <a href = "#"> Vision </a>
    <a href = "#"> Why us? </a>
    <a href = "#"> Contacts </a>
</div>    

CSS:

.icon                                       /* start of menu icon*/
    {
    display: inline-block;
    cursor: pointer;
    }
.bar1, .bar2, .bar3
    {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
    }
.change .bar1
    {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
    }
.change .bar2
    {
    opacity: 0;
    }
.change .bar3
    {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
    }                                                 /* end of menu icon */
.sideNav                                              /* start of sideNav */
    {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: auto;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px; 
    transition: 0.5s;
    }
.sideNav a
    {
    padding: 15px 32px 15px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
    }
.sideNav a:hover, .offcanvas a:focus
    {
    color: #f1f1f1;
    }                                           /* end of sideNav */

Javascript:

function Change(x)                         // script for menu icon 
{
    var mynav = document.getElementById("mysideNav");
    x.classList.toggle("change");
    if (mynav.style.width = "0px") 
    {
       mynav.style.width = "250px";
    }
   else
   {
       mynav.style.width = "0px";
   } 
}                                      //end of script for menu icon 

Answer 1

You were almost there!

When you were checking for the current mynav width, you were incorrectly checking the width... instead, you were declaring inside the if statement. I believe you just typo-ed there, but for comparisons, use == or ===. You can read more about the differences here.

I made an adjustment to your javascript as shown below:

function Change(x)                         // script for menu icon 
{
    var mynav = document.getElementById("mysideNav");
    x.classList.toggle("change");
    if (mynav.offsetWidth === 0) 
    {
       mynav.style.width = "250px";
       console.log("open");
    }
   else
   {
       mynav.style.width = "0px";
       console.log("close");
   } 
} 

I used offsetWidth to check the width, which is from the element and not style. Read more here.

Notice I also added console.login each condition block. This helped me narrow down the comparison issue rather quickly.