1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-07-07 19:57:28 +02:00

Rework homepage concept

This commit is contained in:
Kevin Kandlbinder 2021-10-18 16:51:26 +02:00
parent 07c240be4f
commit b50b7d83c3
11 changed files with 548 additions and 222 deletions
src/components

View file

@ -1,12 +1,56 @@
/* eslint-disable no-undef */
import React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { Trans, Link } from "gatsby-plugin-react-i18next";
import { graphql, StaticQuery } from "gatsby";
import { createPortal } from "react-dom";
import * as styles from "./navigation.module.scss";
import { X } from "lucide-react";
import { Fade as Hamburger } from 'hamburger-react';
const OffScreenNav = ({active, close}) => {
if(typeof window === "undefined") {
return null;
}
return createPortal(<div className={styles.offscreenNav + " " + (active ? styles.active : "")}>
<div className={styles.inner}>
<button className={styles.close} onClick={close}><X/></button>
<span><Trans>menu</Trans></span>
<Link to="/" activeClassName={styles.active}>
<Trans>home</Trans>
</Link>
<Link
id="navBtnProjects"
to="/about"
activeClassName={styles.active}
>
<Trans>about</Trans>
</Link>
<Link
id="navBtnProjects"
to="/projects"
activeClassName={styles.active}
>
<Trans>projects</Trans>
</Link>
<Link
id="navBtnSocial"
to="/social"
activeClassName={styles.active}
>
<Trans>social</Trans>
</Link>
</div>
</div>, window.document.body)
}
const Navigation = ({ isHome }) => {
let [atTop, setAtTop] = useState(false);
const [offscreenNavActive, setOffscreenNavActive] = useState(false);
const closeOffscreenNav = () => setOffscreenNavActive(false);
const updateTransparency = () => {
if (typeof window === "undefined") return;
@ -52,6 +96,7 @@ const Navigation = ({ isHome }) => {
}
>
<nav className={styles.topBarInner}>
<OffScreenNav active={offscreenNavActive} close={closeOffscreenNav} />
<StaticQuery
query={graphql`
query {
@ -63,12 +108,19 @@ const Navigation = ({ isHome }) => {
}
`}
render={(data) => (
<Link to="/" activeClassName={styles.active}>
<Link to="/" activeClassName={styles.active} className={styles.logo}>
{data.site.siteMetadata.title}
</Link>
)}
/>
<div className="flexSpacer"></div>
<Link
id="navBtnProjects"
to="/about"
activeClassName={styles.active}
>
<Trans>about</Trans>
</Link>
<Link
id="navBtnProjects"
to="/projects"
@ -83,6 +135,7 @@ const Navigation = ({ isHome }) => {
>
<Trans>social</Trans>
</Link>
<div className={styles.hamburger}><Hamburger toggle={setOffscreenNavActive} toggled={offscreenNavActive} rounded size={30} /></div>
</nav>
</div>
);