Port to TypeScript

src/components/offscreenNav.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable no-undef */
+import React from "react";
+import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
+import { createPortal } from "react-dom";
+
+import * as styles from "./navigation.module.scss";
+import { X } from "lucide-react";
+import useSiteMetadata from "../helpers/useSiteMetadata";
+
+type OffScreenNavProps = {
+    active: boolean,
+    close: () => void
+}
+
+const OffScreenNav = ({ active, close }: OffScreenNavProps) => {
+    const { t } = useTranslation();
+    const { modules } = useSiteMetadata();
+
+    if (typeof document === "undefined") return <></>;
+
+    return createPortal(
+        <div
+            className={
+                styles.offscreenNav + (active ? " " + styles.active : "")
+            }
+        >
+            <div className={styles.inner}>
+                <button
+                    className={styles.close}
+                    onClick={close}
+                    aria-label={t("closeMenu")}
+                >
+                    <X />
+                </button>
+                <span>
+                    <Trans>menu</Trans>
+                </span>
+                <Link to="/" activeClassName={styles.active}>
+                    <Trans>home.title</Trans>
+                </Link>
+                <Link to="/about" activeClassName={styles.active}>
+                    <Trans>about.title</Trans>
+                </Link>
+                {modules.projects && (
+                    <Link to="/projects" activeClassName={styles.active}>
+                        <Trans>project.plural</Trans>
+                    </Link>
+                )}
+                <Link to="/social" activeClassName={styles.active}>
+                    <Trans>social.title</Trans>
+                </Link>
+                {modules.blog && (
+                    <Link to="/blog" activeClassName={styles.active}>
+                        <Trans>blog.title</Trans>
+                    </Link>
+                )}
+            </div>
+        </div>,
+        document.getElementById("osnav")
+    );
+};
+
+export default OffScreenNav;