React项目中无法实现汉堡菜单点击展开面板功能求助

核心思路 #

用React的useState管理侧边面板的显示状态，给汉堡按钮绑定点击事件切换状态，再通过状态控制侧边面板的显示/隐藏，配合CSS实现过渡效果。

具体实现步骤 #

1. 引入状态钩子
   在组件顶部引入useState，定义控制侧边栏显示的状态：

import { useState } from 'react';

const YourNavbarComponent = () => {
  // 初始状态为false，侧边栏默认隐藏
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
  // ...其他组件代码
}

2. 给汉堡按钮绑定点击事件
   修改你原有的按钮代码，添加onClick事件切换状态：

<div className={styles["navbar-responsive-menu"]}>
  <Button 
    theme="transparent"
    onClick={() => setIsSidebarOpen(!isSidebarOpen)}
  >
    <HamburgerMenu size="32" color="var(--white-100)"/>
  </Button>
</div>

3. 添加侧边面板组件
   在组件里加入侧边面板的JSX，根据isSidebarOpen状态控制显示：

{/* 侧边面板 */}
<div className={`${styles.sidebar} ${isSidebarOpen ? styles.open : ''}`}>
  {/* 这里放侧边栏内容，比如导航链接 */}
  <ul className={styles.sidebarLinks}>
    <li><a href="/home">首页</a></li>
    <li><a href="/profile">个人中心</a></li>
    <li><a href="/settings">设置</a></li>
  </ul>
  {/* 可选：添加关闭按钮 */}
  <Button 
    theme="transparent"
    onClick={() => setIsSidebarOpen(false)}
    className={styles.closeBtn}
  >
    ×
  </Button>
</div>

4. 编写CSS样式（CSS Modules示例）
   在对应样式文件里添加侧边栏样式，实现滑入滑出效果：

.sidebar {
  position: fixed;
  top: 0;
  right: 0; /* 可根据需求改为left */
  width: 280px;
  height: 100vh;
  background-color: var(--dark-bg);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  padding: 2rem;
  z-index: 1000;
}

.sidebar.open {
  transform: translateX(0);
}

.sidebarLinks {
  list-style: none;
  padding: 0;
  margin-top: 4rem;
}

.sidebarLinks li {
  margin-bottom: 1.5rem;
}

.sidebarLinks a {
  color: var(--white-100);
  text-decoration: none;
  font-size: 1.2rem;
}

.closeBtn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--white-100);
}

额外优化建议 #

• 可添加遮罩层，打开侧边栏时覆盖页面其他区域，点击遮罩也能关闭侧边栏
• 支持移动端触摸侧滑关闭侧边栏的交互

内容的提问来源于stack exchange，提问作者binfile