Organize directories

apps/link/components/ZammadWrapper.tsx

@@ -0,0 +1,49 @@
+import { FC, useState } from "react";
+import Iframe from "react-iframe";
+
+type ZammadWrapperProps = {
+  url: string;
+  hideSidebar?: boolean;
+};
+
+export const ZammadWrapper: FC<ZammadWrapperProps> = ({
+  url,
+  hideSidebar = true,
+}) => {
+  const [display, setDisplay] = useState("inherit");
+
+  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");
+      }}
+    />
+  );
+};