Offcanvas

import React from 'react';
import { Button, Dropdown, Offcanvas } from 'react-bootstrap';

const BasicExample = () => {
  const [show, setShow] = useState(false);
  return (
    <>
        <Button variant="primary" onClick={() => setShow(!show)}>
            Launch
        </Button>
        <Offcanvas show={show} onHide={() => setShow(!show)}>
            <Offcanvas.Header closeButton>
                <Offcanvas.Title>Offcanvas</Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                <div className="mb-3">
                    Some text as placeholder. In real life you can have the elements you
                    have chosen. Like, text, images, lists, etc.
                </div>
                <Dropdown>
                    <Dropdown.Toggle variant="secondary" id="dropdown-basic">
                        Dropdown Button
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                        <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                        <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </Offcanvas.Body>
        </Offcanvas>
    </>
  );
}

export default BasicExample;

import React from 'react';
import { Button, Dropdown, Offcanvas } from 'react-bootstrap';

const OffcanvasPlacements = () => {
  const [showStart, setShowStart] = useState(false);
  const [showEnd, setShowEnd] = useState(false);
  const [showTop, setShowTop] = useState(false);
  const [showBottom, setShowBottom] = useState(false);
  return (
    <>
        <Button variant="primary" onClick={() => setShowStart(!showStart)} className="me-2">
            Start
        </Button>
        <Button variant="primary" onClick={() => setShowEnd(!showEnd)} className="me-2">
            End
        </Button>
        <Button variant="primary" onClick={() => setShowTop(!showTop)} className="me-2">
            Top
        </Button>
        <Button variant="primary" onClick={() => setShowBottom(!showBottom)} className="me-2">
            Bottom
        </Button>
        // Offcanvas Start
        <Offcanvas placement="start" show={showStart} onHide={() => setShowStart(!showStart)}>
            <Offcanvas.Header closeButton>
                <Offcanvas.Title>Offcanvas Start</Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                ...
            </Offcanvas.Body>
        </Offcanvas>
        // Offcanvas End
        <Offcanvas placement="end" show={showEnd} onHide={() => setShowEnd(!showEnd)}>
            <Offcanvas.Header closeButton>
                <Offcanvas.Title>Offcanvas End</Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                ...
            </Offcanvas.Body>
        </Offcanvas>
        // Offcanvas Top
        <Offcanvas placement="top" show={showTop} onHide={() => setShowTop(!showTop)}>
            <Offcanvas.Header closeButton>
                <Offcanvas.Title>Offcanvas Top</Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                ...
            </Offcanvas.Body>
        </Offcanvas>
        // / Offcanvas Bottom
        <Offcanvas placement="bottom" show={showBottom} onHide={() => setShowBottom(!showBottom)}>
            <Offcanvas.Header closeButton>
                <Offcanvas.Title>Offcanvas Bottom</Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                ...
            </Offcanvas.Body>
        </Offcanvas>
    </>
  );
}

export default OffcanvasPlacements;