Offcanvas

export function Defaultlink() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Link with href
      </Button>

<Offcanvas show={show} onHide={handleClose} backdrop={true} 
    className="offcanvas offcanvas-start" tabIndex={-1} 
  id="offcanvasExample">
 <Offcanvas.Header closeButton 
 className="border-bottom border-block-end-dashed">
 <h5 className="offcanvas-title" id="offcanvasExampleLabel">
 Notifications</h5>
 </Offcanvas.Header>
 <Offcanvas.Body className=" p-0">
     ..................
 </Offcanvas.Body>
</Offcanvas>
    </>
  );
}

export function Defaultlink() {
  const [show1, setShow1] = useState(false)

  const handleClose1 = () => setShow1(false)
  const handleShow1 = () => setShow1(true)

  return (
    <>
    <Button variant='primary' className="btn" type="button"
     onClick={handleShow1}>Enable
    body scrolling
    </Button>
<Offcanvas show={show1} onHide={handleClose1} 
className="offcanvas offcanvas-start" backdrop={false} 
        tabIndex={-1} id="offcanvasScrolling">
 <Offcanvas.Header closeButton 
 className="border-bottom border-block-end-dashed">
     <h5 className="offcanvas-title" id="offcanvasScrollingLabel">
     Notifications</h5>
 </Offcanvas.Header>
 <Offcanvas.Body className="p-0">
            .........
              </div>
        </Offcanvas.Body>
    </Offcanvas>
    </>
  );
}

export function Defaultlink() {
//static
const [show2, setShow2] = useState(false);

const handleClose2 = () => setShow2(false);
const handleShow2 = () => setShow2(true);

  return (
    <>
<Button className="btn btn-primary" type="button"
onClick={handleShow2}> Toggle static offcanvas
</Button>
<Offcanvas show={show2} onHide={handleClose2} backdrop="static" 
className="offcanvas offcanvas-start" tabIndex={-1}
id="staticBackdrop" >
<Offcanvas.Header closeButton 
className="offcanvas-header border-bottom border-block-end-dashed">
    <h5 className="offcanvas-title" id="staticBackdropLabel">
    Notifications</h5>
</Offcanvas.Header>
<Offcanvas.Body className="offcanvas-body p-0">
................
</Offcanvas.Body>
</Offcanvas>
    </>
  );
}

export function Defaultlink() {
  const [show3, setShow3] = useState(false);

  const handleClose3 = () => setShow3(false);
  const handleShow3 = () => setShow(true);

  return (
    <>
<Button className="btn btn-primary" type="button" 
onClick={handleShow3}>Enable both scrolling &amp; 
backdrop</Button>

<Offcanvas show={show3} onHide={handleClose3} 
backdrop={true}    tabIndex={-1}
className="offcanvas offcanvas-start" 
id="offcanvasWithBothOptions">
<Offcanvas.Header closeButton 
className="border-bottom border-block-end-dashed">
<h5 className="offcanvas-title
 " id="offcanvasWithBothOptionsLabel">
 Notifications</h5>
</Offcanvas.Header>
<Offcanvas.Body className="p-0">
...................
</Offcanvas.Body>
</Offcanvas>
    </>
  );
}

export function Defaultlink() {
const [showb, setShowb] = useState(false);

const handleCloseb = () => setShowb(false);
const handleShowb = () => setShowb(true);

  return (
    <>
    <Button className="btn btn-primary mb-1" type="button" 
     onClick={handleShowb}>Toggle bottom offcanvas</Button>
<Offcanvas placement='bottom' show={showb} onHide={handleCloseb} 
className="offcanvas offcanvas-bottom" tabIndex={-1} id="offcanvasBottom">
    <Offcanvas.Header closeButton className="offcanvas-header">
        <h5 className="offcanvas-title" id="offcanvasBottomLabel">
        Offcanvas bottom
        </h5>
    </Offcanvas.Header>
    <Offcanvas.Body className="offcanvas-body small">
        ...
    </Offcanvas.Body>
</Offcanvas>
    </>
  );
}