Collapsed menu page

I saw a site on the Internet with a collapsible side menu

Collapsed menu

Expanded menu

Help please, stalled - I really need help. It seems to me that the error is inside the js code. There is a code (should collapse into a column on the side when the icon is clicked and expand on hover)

<style type="text/css">
  * {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
  }
  
  ul {
    background: #afafaf;
    display: inline-block;
    width: 420px;
    border-right: 1px solid #000;
  }
  
  ul li {
    padding: 6px 0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }
  
  ul li:hover {
    background: lightgreen;
  }
  
  ul li a {
    color: #000;
  }
  
  ul li:hover a,
  ul li:hover .fa {
    color: #fff;
  }
  
  ul li .fa {
    display: inline-block;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  .leftside {
    margin-left: 16px;
    display: inline-block;
    width: 30px;
    height: 30px;
    display: inline-flex;
  }
  
  .rightside {
    margin-right: 16px;
    visibility: hidden;
    width: 30px;
    height: 30px;
    display: inline-flex;
  }
  
  .centerplace {
    width: 328px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .nestedblock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="testsite.js">
  let elemmenuitemli = document.querySelectorAll('.fa');
  let sidemenu = document.querySelector('#sidemenu');

  elemmenuitemli.addEventListener("onmouseenter", checkitem);
  elemmenuitemli.addEventListener("onmouseleave", checkitem);


  function checkitem() {
    if sidemenu.classList.contains("active") {
      /* Удаление меню ul*/
      sidemenu.delete();
      /* Сворачивание меню ul */
      <
      ul id = "sidemenu" >
        <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        /li> <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        /li> <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        /li> <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        /li> <
        /li> <
        /ul>
    }
    else {
      /* Удаление меню ul*/
      sidemenu.delete(); <
      ul id = "sidemenu" >
        <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        div class = "centerplace" >
        <
        a href = ""
      class = "nestedblock" > Техника для кухни < /a> <
        /div> <
        div class = "rightside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        /li> <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        div class = "centerplace" >
        <
        a href = ""
      class = "nestedblock" > Бытовая техника для дома < /a> <
        /div> <
        div class = "rightside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        /li> <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        div class = "centerplace" >
        <
        a href = ""
      class = "nestedblock" > Ноутбуки и компьютеры < /a> <
        /div> <
        div class = "rightside" >
        <
        i class = "fa fa-home" > < /i> <
        /div>     <
        /li> <
        li >
        <
        div class = "leftside" >
        <
        i class = "fa fa-home" > < /i> <
        /div> <
        div class = "centerplace" >
        <
        a href = ""
      class = "nestedblock" > Комплектующие < /a> <
        /div> <
        div class = "rightside" >
        <
        i class = "fa fa-home" > < /i> <
        /div>     <
        /li> <
        /li> <
        /ul>
      sidemenu.classList.add('active');
      /* Разворачивание меню ul */
    }
  }
</script>
<ul id="sidemenu">
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Техника для кухни</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Бытовая техника для дома</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  <li>
    <div class="leftside">
      <i class="fa fa-home"></i>
    </div>
    <div class="centerplace">
      <a href="" class="nestedblock">Комплектующие</a>
    </div>
    <div class="rightside">
      <i class="fa fa-home"></i>
    </div>
  </li>
  </li>
</ul>

Why doesn't it work in the above way?