如何转换响应式导航栏并将图标更改为X？

<nav class="navbar">
  <div class="navbar-toggle"></div>
  <ul class="navbar-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* 导航栏样式 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f1f1f1;
  padding: 10px;
}

/* 导航栏菜单样式 */
.navbar-menu {
  display: flex;
  list-style-type: none;
}

.navbar-menu li {
  margin-right: 10px;
}

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

/* 导航栏折叠按钮样式 */
.navbar-toggle {
  width: 30px;
  height: 30px;
  background-color: #333;
  position: relative;
  cursor: pointer;
}

.navbar-toggle::before,
.navbar-toggle::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.navbar-toggle::before {
  top: 0;
}

.navbar-toggle::after {
  bottom: 0;
}

/* 导航栏折叠状态样式 */
.navbar-collapse {
  display: none;
}

.navbar-collapse.active {
  display: block;
}

.navbar-toggle.active::before {
  transform: rotate(45deg);
  top: 50%;
}

.navbar-toggle.active::after {
  transform: rotate(-45deg);
  bottom: 50%;
}

// 导航栏折叠按钮点击事件
document.querySelector('.navbar-toggle').addEventListener('click', function() {
  document.querySelector('.navbar-collapse').classList.toggle('active');
  this.classList.toggle('active');
});