Есть ли способ легко изменить значок меню гамбургера обратно на три строки в функции closeNav?

Я пытаюсь создать гамбургер-меню, которое открывается и закрывается при нажатии на значок меню. Когда я впервые открываю навигацию, цвет фона настраивается на ширину 100%, а три строки переходят / меняются на «X». Однако, когда я снова нажимаю «X», чтобы закрыть навигацию, ширина фона меняется на 0%, но значок не меняется.

Я тоже пытаюсь использовать для этого JavaScript. Хотя я не уверен, как проще всего реализовать функцию гамбургер-меню.

В настоящее время я пробовал использовать функцию onclick и x.classList.toggle ("изменение"); для изменения значка меню.

HTML

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav(this)"></a>

</div>

  <span style="font-size:30px;cursor:pointer" onclick="openNav(this)">
 <div class="line1"></div>
<div class="line2"></div>
  <div class="line3"></div>
</span>

CSS

 body {
font-family: "Lato", sans-serif;
}

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

.sidenav a {
 padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
 display: block;
 }

.sidenav a:hover {
 color: #f1f1f1;
 }

 .line1, .line2, .line3{
  width:35px;
 height:2px;
 background-color:black;
 margin:6px 0;
 transition:0.3s;
 }


 .change .line1 {
 -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  -webkit-transition: 0.3s ease;
  }

.change .line2 {opacity: 0;}

 .change .line3 {
   -webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-7px, -2px);
    -webkit-transition: 0.3s ease;

 }

   @media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

JAVASCRIPT

   function openNav(x) {
  document.getElementById("mySidenav").style.width = "100%";
  x.classList.toggle("change");

  }


 function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
 x.classList.toggle("change");
  }