set up right side bar for filter globally

src/components/common/GlobalOffcanvas.jsx

@@ -0,0 +1,52 @@
+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;

src/components/common/OffcanvasTrigger.jsx

@@ -0,0 +1,26 @@
+import { createPortal } from "react-dom";
+import { useFab } from "../../Context/FabContext";
+
+const OffcanvasTrigger = () => {
+  const { openOffcanvas, offcanvas, showTrigger } = useFab();
+
+  if (!showTrigger || !offcanvas.content) return null;
+
+  const btn = (
+    <i
+      className="bx bx-slider-alt position-fixed p-2 bg-primary text-white rounded-start"
+      onClick={() => openOffcanvas(offcanvas.title, offcanvas.content)} 
+      role="button"
+      style={{
+        top: "25%",
+        right: "0%",
+        cursor: "pointer",
+        zIndex: 1056,
+      }}
+    />
+  );
+
+  return createPortal(btn, document.body);
+};
+
+export default OffcanvasTrigger;

src/layouts/HomeLayout.jsx

@@ -7,6 +7,8 @@ import Footer from "../components/Layout/Footer";
 import FloatingMenu from "../components/common/FloatingMenu";
 import { FabProvider } from "../Context/FabContext";
 import { useSelector } from "react-redux";
+import OffcanvasTrigger from "../components/common/OffcanvasTrigger";
+import GlobalOffcanvas from "../components/common/GlobalOffcanvas";
 
 const HomeLayout = () => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
@@ -34,9 +36,11 @@ const HomeLayout = () => {
               <Footer />
             </div>
           </div>
+          <OffcanvasTrigger />
           <FloatingMenu />
           <div className="layout-overlay layout-menu-toggle"></div>
         </div>
+        <GlobalOffcanvas />
       </div>
     </FabProvider>
   );