link-stack/apps/link/components/ZammadWrapper.tsx
2023-02-22 13:05:52 +00:00

51 lines
1.5 KiB
TypeScript

import { FC, useState } from "react";
import Iframe from "react-iframe";
type ZammadWrapperProps = {
path: string;
hideSidebar?: boolean;
};
export const ZammadWrapper: FC<ZammadWrapperProps> = ({
path,
hideSidebar = true,
}) => {
const [display, setDisplay] = useState("hidden");
const url = `https://redaranj-bookish-tribble-56jwjx5wh4j4w-8003.preview.app.github.dev/zammad${path}`;
console.log({ base: process.env.LINK_URL, path, url })
return (
< Iframe
id="link"
url={url}
width="100%"
height="100%"
frameBorder={0}
styles={{ display }
}
onLoad={() => {
const linkElement = document.querySelector("iframe");
if (
linkElement.contentDocument &&
linkElement.contentDocument?.querySelector &&
linkElement.contentDocument.querySelector("#navigation") &&
linkElement.contentDocument.querySelector("body") &&
linkElement.contentDocument.querySelector(".sidebar")
) {
// @ts-ignore
linkElement.contentDocument.querySelector("#navigation").style =
"display: none";
// @ts-ignore
linkElement.contentDocument.querySelector("body").style =
"font-family: Arial";
if (hideSidebar) {
// @ts-ignore
linkElement.contentDocument.querySelector(".sidebar").style =
"display: none";
}
}
setDisplay("inherit");
}}
/>
);
};