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:
parent
07c240be4f
commit
b50b7d83c3
11 changed files with 548 additions and 222 deletions
src/components
|
@ -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>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue