在React中使侧边栏和导航栏在移动屏幕中响应

Question

所以基本上侧边栏和导航栏在我的代码中都是不同的组件我有 navbar.jsx 和 sidebar.jsx 并且两者都在 Student.jsx 下调用...现在在移动屏幕上我希望侧边栏也进入汉堡包图标移动屏幕上的导航栏，并且当单击包含侧边栏及其不同页面的图标时，用户可以导航不同的页面，例如仪表板咨询等

我试图隐藏移动屏幕中的侧边栏，我将 css 在移动屏幕中不显示，并尝试使用 usestate 挂钩和切换逻辑，但我无法将侧边栏放在导航栏中，我希望它们在移动屏幕中有所不同，它们应该是在一起这就是现在的样子

Answer 1

假设您在没有第三方库的情况下编写简单的 React，您可以通过在 CSS 中使用媒体查询来实现这一点。

在根元素的 sidebars.jsx 中，添加一个 className，例如

sidebar

，对于根元素的 navbar.js，添加一个 className，例如

navbar

。

然后您可以创建一个包含以下内容的 CSS 文件：

@media (width <= 840px) {
  .sidebar {
    display: none;
  }

  .navbar {
    display: block;
  }
}

@media (width > 840px) {
  .sidebar {
    display: block;
  }

  .navbar {
    display: none;
  }
}