如何对齐图标引导菜单(处于折叠状态)

<nav class="navbar">
  <div class="navbar-toggle">
    <i class="icon"></i>
  </div>
  <ul class="menu">
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</nav>

.navbar {
  background-color: #f2f2f2;
  padding: 10px;
}

.navbar-toggle {
  cursor: pointer;
}

.icon {
  font-size: 20px;
  color: #333;
}

.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu li {
  margin-bottom: 10px;
}

.menu li a {
  text-decoration: none;
  color: #333;
}

var navbarToggle = document.querySelector('.navbar-toggle');
var menu = document.querySelector('.menu');

navbarToggle.addEventListener('click', function() {
  menu.classList.toggle('show');
});