ReactJS导航栏移动端适配问题：桌面视图侧边菜单无法隐藏

核心原因是你没有给侧边菜单添加桌面端的隐藏规则，按以下步骤处理即可：

方案1：添加SCSS媒体查询隐藏规则 #

这是最稳妥的实现方式，不会受React组件状态残留影响。你可以参考以下代码实现：
首先建议先定义全局响应式断点变量，方便后续统一维护：

// 定义桌面端断点，可根据你的设计需求调整数值
$desktop-breakpoint: 768px;

然后给侧边菜单添加对应样式规则：

// 移动端默认样式
.sidebar-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 70vw;
  background: #fff;
  transition: transform 0.3s ease;
  // 移动端默认收起，点击汉堡添加active类展示
  transform: translateX(100%);
  &.active {
    transform: translateX(0);
  }
}

.hamburger-btn {
  display: block;
}

// 桌面端响应式规则
@media screen and (min-width: $desktop-breakpoint) {
  .hamburger-btn {
    display: none; // 你已经实现的汉堡按钮隐藏逻辑
  }
  .sidebar-menu {
    // 强制隐藏侧边菜单，不受active类影响
    display: none !important;
    pointer-events: none; // 避免桌面端误触触发侧边菜单交互
  }
}

常见问题排查 #

如果修改后依然不生效，可按顺序排查以下问题：

• 检查侧边菜单的类名是否正确绑定到了DOM元素上，没有拼写错误
• 检查媒体查询的断点是否写反：不要把min-width错写成max-width
• 打开浏览器开发者工具的元素面板，查看侧边菜单的样式层级，确认是否有其他更高优先级的规则强制让菜单显示，调整对应规则的优先级即可
• 可配合React侧逻辑做双重保障：监听窗口宽度变化，当宽度大于桌面断点时，自动将控制侧边菜单展开的state设置为false

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