Collapse the menu into a column of icons on the side

There is a code to collapse the menu (testsite.js file). On hover or mouse click, I change the content of the sidemenu using the innerHTML property - content of the side menu.

let elemmenuitemli = document.querySelectorAll('.fa');


/* elemmenuitemli.addEventListener("mouseover", checkitem);
elemmenuitemli.addEventListener("mouseleave", checkitem);*/

elemmenuitemli.forEach(li => {
  li.addEventListener("mouseover", checkitem);
  li.addEventListener("mouseleave", checkitem);
});


alert("Файл вызван");

function checkitem() {
    let sidemenu = document.querySelector('#sidemenu');
    if (sidemenu.classList.contains("active"))
    {
        sidemenu.innerHTML=`<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>`;
  
  
  sidemenu.classList.remove("active");

    }
    else {
        sidemenu.innerHTML=`
        /* Сворачивание меню ul */
          <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>
  `;
        sidemenu.classList.add('active');
        /* Разворачивание меню ul */
    }
}

Testsite.css file

* {
  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;
}

and the testsite.html file

<link rel="stylesheet" href="testsite.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="testsite.js"> -->
<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>

<script src="testsite.js"></script>

The result of the script

Horizontal menu

How to achieve vertical alignment of menu items?