CSS实现侧边栏切换效果

<div class="sidebar">
  <div class="toggle-btn">☰</div>
  <ul>
    <li>首页</li>
    <li>设置</li>
    <li>用户</li>
  </ul>
</div>
<div class="content">
  <p>主内容区</p>
</div>

.sidebar {
  width: 200px;
  height: 100vh;
  background-color: #333;
  color: white;
  padding: 20px 0;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  transition: width 0.3s ease;
  overflow: hidden;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  padding: 15px 20px;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #555;
}

.content {
  margin-left: 200px;
  padding: 20px;
  transition: margin-left 0.3s ease;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar.collapsed + .content {
  margin-left: 60px;
}

.sidebar.collapsed li {
  display: none;
}

.sidebar.collapsed .toggle-btn {
  font-size: 18px;
  text-align: center;
}

document.querySelector('.toggle-btn').addEventListener('click', function () {
  document.querySelector('.sidebar').classList.toggle('collapsed');
});

.sidebar:hover {
  width: 200px;
}

.sidebar:hover li {
  display: block;
}