Add way to disable site modules in config

This commit is contained in:
Kevin Kandlbinder 2021-12-13 17:17:17 +00:00 committed by GitHub
parent a972bf6234
commit f704547b25
8 changed files with 359 additions and 210 deletions

View file

@ -7,12 +7,15 @@ import { graphql, StaticQuery } from "gatsby";
import * as styles from "./navigation.module.scss";
import { Fade as Hamburger } from "hamburger-react";
import OffScreenNav from "./offscreenNav";
import useSiteMetadata from "../helpers/useSiteMetadata";
const Navigation = ({ isHome }) => {
let [atTop, setAtTop] = useState(false);
const [offscreenNavActive, setOffscreenNavActive] = useState(false);
const { t } = useTranslation();
const { modules } = useSiteMetadata();
const closeOffscreenNav = () => setOffscreenNavActive(false);
const updateTransparency = () => {
@ -87,15 +90,19 @@ const Navigation = ({ isHome }) => {
<Link to="/about" activeClassName={styles.active}>
<Trans>about.title</Trans>
</Link>
<Link to="/projects" activeClassName={styles.active}>
<Trans>project.plural</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>
<Link to="/blog" activeClassName={styles.active}>
<Trans>blog.title</Trans>
</Link>
{modules.blog && (
<Link to="/blog" activeClassName={styles.active}>
<Trans>blog.title</Trans>
</Link>
)}
<div className={styles.hamburger}>
<Hamburger
toggle={setOffscreenNavActive}

View file

@ -6,9 +6,12 @@ import { createPortal } from "react-dom";
import * as styles from "./navigation.module.scss";
import { X } from "lucide-react";
import useSiteMetadata from "../helpers/useSiteMetadata";
const OffScreenNav = ({ active, close }) => {
const { t } = useTranslation();
const { modules } = useSiteMetadata();
if (typeof document === "undefined") return <></>;
return createPortal(
@ -34,15 +37,19 @@ const OffScreenNav = ({ active, close }) => {
<Link to="/about" activeClassName={styles.active}>
<Trans>about.title</Trans>
</Link>
<Link to="/projects" activeClassName={styles.active}>
<Trans>project.plural</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>
<Link to="/blog" activeClassName={styles.active}>
<Trans>blog.title</Trans>
</Link>
{modules.blog && (
<Link to="/blog" activeClassName={styles.active}>
<Trans>blog.title</Trans>
</Link>
)}
</div>
</div>,
document.getElementById("osnav")