menu: on click on prduct open details as BS, also add redirect button to detials page if user click on redirect button

src/pages/product/components/ProductBottomSheet.tsx

@@ -0,0 +1,68 @@
+import { ProBottomSheet } from "components/ProBottomSheet/ProBottomSheet.tsx";
+import ProductDetailPage from "../page";
+import { Button } from "antd";
+import { UploadOutlined } from "@ant-design/icons";
+import { useAppSelector } from "redux/hooks";
+import { useNavigate, useParams } from "react-router-dom";
+
+interface ProductBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function ProductBottomSheet({
+  isOpen,
+  onClose,
+}: ProductBottomSheetProps) {
+  const { themeName } = useAppSelector((state) => state.theme);
+  const { isRTL } = useAppSelector((state) => state.locale);
+  const { subdomain } = useParams();
+  const closeButtonStyle: React.CSSProperties = {
+    color: themeName === "dark" ? "#ffffff" : "#4D5154",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 8,
+    borderRadius: "50%",
+    backgroundColor: themeName === "dark" ? "rgba(54, 54, 54, 0.8)" : "#EDEEEE",
+    border: `1px solid ${themeName === "dark" ? "#424242" : "transparent"}`,
+    transition: "all 0.3s ease",
+    cursor: "pointer",
+    width: 30,
+    height: 30,
+    position: "absolute",
+    top: 40,
+    [isRTL ? "right" : "left"]: 16,
+    zIndex: 1000,
+  };
+
+  const navigate = useNavigate();
+  const productId = localStorage.getItem("productId");
+
+  const redirectToProductPage = () => {
+    if (productId) {
+      navigate(`/${subdomain}/product/${productId}`);
+      onClose();
+    }
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      showCloseButton={true}
+      initialSnap={1}
+      height={"90vh"}
+      snapPoints={["90vh"]}
+      contentStyle={{ padding: 0 }}
+    >
+      <Button
+        type="text"
+        icon={<UploadOutlined />}
+        onClick={redirectToProductPage}
+        style={closeButtonStyle}
+      />
+      <ProductDetailPage onClose={onClose} />
+    </ProBottomSheet>
+  );
+}