<div class="sidenav-body">
<div class="topnav top">
</div>
<div class="sidenav">
<ul class="sidenav-list">
<li class="items">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
List item
</li>
<li class="items">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
List item
</li>
</ul>
</div>
</div>
<div class="sidenav-body">
<div class="topnav">
<i class="fa fa-bars hamburger" id="hamburger"></i>
</div>
<div class="sidenav toggle-sidenav" id="sidenav">
<ul class="sidenav-list">
<li class="items">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
List item
</li>
<li class="items">
<div class="avatar avatar-xs-size">
<img src="https://picsum.photos/200?random=4" class="img-responsive img-round" alt="avatar">
</div>
List item
</li>
</ul>
</div>
</div>
const hamburger = document.querySelector("#hamburger")
const sidenav = document.querySelector("#sidenav")
hamburger.addEventListener("click", () => {
if(sidenav.style.width === "12rem"){
sidenav.style.width = "0"
} else {
sidenav.style.width = "12rem"
}
})