JavaScript SideNav OneButton Toggle

Question

Je réussis à ouvrir le sidenav mais je n'arrive pas à le fermer. J'ai lu que l'utilisation de conditionnels est la solution, mais ici, elle ne fait pas ce qu'elle est censée faire.

Voici mon code:

var sidenav = document.getElementById("sidenav"); 
 
var page = document.getElementById("page"); 
 

 
function togNav() { 
 
    if (sidenav.style.width = '0px') { 
 
    sidenav.style.width = "200px"; 
 
    page.style.marginLeft = "200px"; 
 
    } else { 
 
    sidenav.style.width = "0px"; 
 
    page.style.marginLeft = "0px"; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.openbtn { 
 
    background: none; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
} 
 

 
#bar { 
 
    width: 25px; 
 
    height: 3px; 
 
    margin: 6px; 
 
    background: #999; 
 
    border-radius: 5px; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #eee; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.sidenav li { 
 
    list-style-type: none; 
 
} 
 

 
.sidenav a { 
 
    color: #555; 
 
    display: block; 
 
    padding: 15px 0px 15px 75px; 
 
    text-decoration: none; 
 
    border-bottom: 0.1px #ddd solid; 
 
    font-weight: 300; 
 
    font-family: helvetica neue; 
 
} 
 

 
.sidenav a:hover { 
 
    background: #ddd; 
 
} 
 

 
#page { 
 
    margin-left: 0px; 
 
    transition: 0.5s; 
 
}

<div class="sidenav" id="sidenav"> 
 
    <ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
    <li><a href="#">Link 4</a></li> 
 
    <li><a href="#">Link 5</a></li> 
 
    </ul> 
 
</div> 
 
<div id="page"> 
 
    <button id="openbtn" class="openbtn" onclick="togNav()"> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    </button> 
 
</div>

Answer 1

Si la condition était mauvaise. Vous utilisez = (affectation) au lieu d'utiliser == pour la comparaison

var sidenav = document.getElementById("sidenav"); 
 
var page = document.getElementById("page"); 
 

 
function togNav() { 
 
    if (sidenav.style.width == '0px') { // here 
 
    sidenav.style.width = "200px"; 
 
    page.style.marginLeft = "200px"; 
 
    } else { 
 
    sidenav.style.width = "0px"; 
 
    page.style.marginLeft = "0px"; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.openbtn { 
 
    background: none; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
} 
 

 
#bar { 
 
    width: 25px; 
 
    height: 3px; 
 
    margin: 6px; 
 
    background: #999; 
 
    border-radius: 5px; 
 
} 
 

 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #eee; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.sidenav li { 
 
    list-style-type: none; 
 
} 
 

 
.sidenav a { 
 
    color: #555; 
 
    display: block; 
 
    padding: 15px 0px 15px 75px; 
 
    text-decoration: none; 
 
    border-bottom: 0.1px #ddd solid; 
 
    font-weight: 300; 
 
    font-family: helvetica neue; 
 
} 
 

 
.sidenav a:hover { 
 
    background: #ddd; 
 
} 
 

 
#page { 
 
    margin-left: 0px; 
 
    transition: 0.5s; 
 
}

<div class="sidenav" id="sidenav"> 
 
    <ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
    <li><a href="#">Link 4</a></li> 
 
    <li><a href="#">Link 5</a></li> 
 
    </ul> 
 
</div> 
 
<div id="page"> 
 
    <button id="openbtn" class="openbtn" onclick="togNav()"> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    </button> 
 
</div>