React Bootstrap or other library for in-canvas to off-canvas solution

Question

My project is using React Bootstrap, however I'm struggling to find the equivalent to Foundation's in-canvas to off-canvas feature, where some piece of content is available in the normal flow of the page but then goes into an off canvas menu on smaller screen sizes. https://get.foundation/sites/docs/off-canvas.html#in-canvas-to-off-canvas

Does anyone know of any other React plugins that would be able to do the same?

For clarity, I'm trying to do this:

(Desktop) (Mobile)

(Mobile opened menu)

Answer 1

• Create a NavBar component with OffCanvas, which expands on small breakpoint (expands = hides menu icon).
• Create Content2 component and put it on your in-canvas screen and in the OffCanvas component.
• Use media query to toggle visibility of Content2 component in your in-canvas scree

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