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:
(Mobile opened menu)
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;
}
}