mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-07-26 12:57:43 +02:00
63 lines
2 KiB
TypeScript
63 lines
2 KiB
TypeScript
/* 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;
|