kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-20 19:37:22 +02:00
Code Issues Projects Releases Wiki Activity

Run prettier

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-10-18 16:57:20 +02:00
parent b50b7d83c3
commit 0b5a905ae6
20 changed files with 452 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

99
src/components/navigation.js
View file

@ -7,44 +7,55 @@ import { createPortal } from "react-dom";
import * as styles from "./navigation.module.scss";
import { X } from "lucide-react";
import { Fade as Hamburger } from 'hamburger-react';
import { Fade as Hamburger } from "hamburger-react";
const OffScreenNav = ({active, close}) => {
if(typeof window === "undefined") {
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)
}
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);
@ -96,7 +107,10 @@ const Navigation = ({ isHome }) => {
}
>
<nav className={styles.topBarInner}>
<OffScreenNav active={offscreenNavActive} close={closeOffscreenNav} />
<OffScreenNav
active={offscreenNavActive}
close={closeOffscreenNav}
/>
<StaticQuery
query={graphql`
query {
@ -108,7 +122,11 @@ const Navigation = ({ isHome }) => {
}
`}
render={(data) => (
<Link to="/" activeClassName={styles.active} className={styles.logo}>
<Link
to="/"
activeClassName={styles.active}
className={styles.logo}
>
{data.site.siteMetadata.title}
</Link>
)}
@ -135,7 +153,14 @@ const Navigation = ({ isHome }) => {
>
<Trans>social</Trans>
</Link>
<div className={styles.hamburger}><Hamburger toggle={setOffscreenNavActive} toggled={offscreenNavActive} rounded size={30} /></div>
<div className={styles.hamburger}>
<Hamburger
toggle={setOffscreenNavActive}
toggled={offscreenNavActive}
rounded
size={30}
/>
</div>
</nav>
</div>
);