53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
import { useFab } from "../../Context/FabContext";
|
|
|
|
const GlobalOffcanvas = () => {
|
|
const { offcanvas, setIsOffcanvasOpen } = useFab();
|
|
const offcanvasRef = useRef();
|
|
|
|
useEffect(() => {
|
|
const el = offcanvasRef.current;
|
|
const bsOffcanvas = new bootstrap.Offcanvas(el);
|
|
|
|
const handleShow = () => setIsOffcanvasOpen(true);
|
|
const handleHide = () => setIsOffcanvasOpen(false);
|
|
|
|
el.addEventListener("show.bs.offcanvas", handleShow);
|
|
el.addEventListener("hidden.bs.offcanvas", handleHide);
|
|
|
|
return () => {
|
|
el.removeEventListener("show.bs.offcanvas", handleShow);
|
|
el.removeEventListener("hidden.bs.offcanvas", handleHide);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="offcanvas offcanvas-end"
|
|
tabIndex="-1"
|
|
id="globalOffcanvas"
|
|
ref={offcanvasRef}
|
|
aria-labelledby="offcanvasLabel"
|
|
data-bs-backdrop="false"
|
|
data-bs-scroll="true"
|
|
>
|
|
<div className="offcanvas-header">
|
|
<h5 className="offcanvas-title" id="offcanvasLabel">
|
|
{offcanvas.title}
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
className="btn-close text-reset"
|
|
data-bs-dismiss="offcanvas"
|
|
aria-label="Close"
|
|
></button>
|
|
</div>
|
|
<div className="offcanvas-body mx-0 py-1 flex-grow-0">
|
|
{offcanvas.content || <p>No content</p>}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GlobalOffcanvas;
|