反应引导程序或其他库，用于ichosvas of-canvas解决方案

Question

我的项目是使用React Bootstrap，但是我很难找到与Foundation的ichosvas到Off-Canvas功能相等的，这些内容在页面的正常流程中可用，但随后进入了Off Canvas菜单。较小的屏幕尺寸。 https://get.foundation/sites/sites/ docs/off-canvas.html＃canvas-to-to-off-canvas

有人知道还有其他能够做到这一点的其他React插件吗？

为了清楚起见，我正在尝试这样做：（

桌面） （移动）

（移动打开菜单）

Answer 1

• 使用 OffCanvas 创建一个 NavBar 组件，该组件会在小断点上展开（展开 = 隐藏菜单图标）。
• 创建 Content2 组件并将其放在画布内屏幕和 OffCanvas 组件中。
• 使用媒体查询切换画布屏幕中的 Content2 组件的可见性

App.js:

<Stack className="min-vh-100">
    <Navbar expand="sm" className="px-3 bg-primary">
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Offcanvas
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
          placement="end"
        >
            <Offcanvas.Header closeButton>
                <Offcanvas.Title id="offcanvasNavbarLabel">
                    Offcanvas
                </Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                <Content2 />
            </Offcanvas.Body>
        </Navbar.Offcanvas>
    </Navbar>
    <Stack direction="horizontal" className="flex-grow-1 align-items-stretch">
        <div className="bg-info flex-fill w-50 d-flex justify-content-center align-items-center">
            Content 1
        </div>
        <div className="content2 w-50">
            <Content2 />
        </div>
    </Stack>
</Stack>

css:

.content2 {
  display: block;
}

@media screen and (max-width: 576px) {
  .content2 {
    display: none;
  }
}

https://codesandbox.io/s/fancy-snow-w2ug5w