Javascript/CSS边栏切换

<div class="sidebar">
  <button class="sidebar-toggle"></button>
  <div class="sidebar-content">
    <!-- 边栏内容 -->
  </div>
</div>

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: transform 0.3s ease-in-out;
}

.sidebar-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-color: #333;
  border: none;
  outline: none;
  cursor: pointer;
}

.sidebar-content {
  padding: 20px;
  display: none;
}

.sidebar.active {
  transform: translateX(-200px);
}

.sidebar.active .sidebar-content {
  display: block;
}

const sidebar = document.querySelector('.sidebar');
const toggleButton = document.querySelector('.sidebar-toggle');

toggleButton.addEventListener('click', () => {
  sidebar.classList.toggle('active');
});