如何创建自动隐藏侧边栏

<div class="sidebar">
  <!-- 侧边栏内容 -->
</div>

<div class="main-content">
  <!-- 主要内容 -->
</div>

.sidebar {
  width: 200px;
  background-color: #f1f1f1;
  transition: width 0.3s;
}

.main-content {
  /* 主要内容的样式 */
}

// 获取侧边栏和主内容的元素
const sidebar = document.querySelector('.sidebar');
const mainContent = document.querySelector('.main-content');

// 监听按钮点击事件
document.querySelector('.toggle-button').addEventListener('click', () => {
  // 切换侧边栏的显示状态
  sidebar.classList.toggle('hidden');
  
  // 调整主内容的宽度
  if (sidebar.classList.contains('hidden')) {
    mainContent.style.width = '100%';
  } else {
    mainContent.style.width = 'calc(100% - 200px)';
  }
});

// 监听窗口大小改变事件
window.addEventListener('resize', () => {
  // 根据窗口宽度调整侧边栏和主内容的显示状态
  if (window.innerWidth <= 768) {
    sidebar.classList.add('hidden');
    mainContent.style.width = '100%';
  } else {
    sidebar.classList.remove('hidden');
    mainContent.style.width = 'calc(100% - 200px)';
  }
});