kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-09 23:16:57 +02:00
Code Issues Projects Releases Wiki Activity

Fix navigation

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-10-18 17:51:31 +02:00
parent 4b0487e300
commit fb16ded074
6 changed files with 84 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/navigation.js
View file

@ -3,62 +3,10 @@ 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 document === "undefined") return <></>;
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>,
document.body
);
};
OffScreenNav.propTypes = {
close: PropTypes.func.isRequired,
active: PropTypes.bool.isRequired,
};
import OffScreenNav from "./offscreenNav";
const Navigation = ({ isHome }) => {
let [atTop, setAtTop] = useState(false);
@ -109,11 +57,11 @@ const Navigation = ({ isHome }) => {
(atTop ? " " + styles.homeBarTransparent : "")
}
>
<OffScreenNav
active={offscreenNavActive}
close={closeOffscreenNav}
/>
<nav className={styles.topBarInner}>
<OffScreenNav
active={offscreenNavActive}
close={closeOffscreenNav}
/>
<StaticQuery
query={graphql`
query {

2
src/components/navigation.module.scss
View file

@ -16,6 +16,7 @@
transition: opacity 0.25s, left 0.25s;
pointer-events: none;
overscroll-behavior: contain;
&.active {
left: 0;
@ -112,6 +113,7 @@
.hamburger {
display: none;
height: 43px;
margin-top: -3px;
@media (max-width: 500px) {
display: block;

61
src/components/offscreenNav.js Normal file
View file

@ -0,0 +1,61 @@
/* eslint-disable no-undef */
import React from "react";
import PropTypes from "prop-types";
import { Trans, Link } from "gatsby-plugin-react-i18next";
import { createPortal } from "react-dom";
import * as styles from "./navigation.module.scss";
import { X } from "lucide-react";
const OffScreenNav = ({ active, close }) => {
if (typeof document === "undefined") return <></>;
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>,
document.getElementById("osnav")
);
};
OffScreenNav.propTypes = {
close: PropTypes.func.isRequired,
active: PropTypes.bool.isRequired,
};
export default OffScreenNav;