kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-04-28 17:56:51 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
gatsby-config.js
View file

@ -31,6 +31,13 @@ module.exports = {
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
`gatsby-transformer-json`,
{
resolve: `gatsby-plugin-portal`,
options: {
key: "osnav",
id: "osnav",
},
},
{
resolve: `gatsby-plugin-remote-images`,
options: {

1
package.json
View file

@ -32,6 +32,7 @@
"gatsby-plugin-manifest": "3.14.0",
"gatsby-plugin-mdx": "2.14.0",
"gatsby-plugin-offline": "4.14.0",
"gatsby-plugin-portal": "^1.0.7",
"gatsby-plugin-react-helmet": "4.14.0",
"gatsby-plugin-react-i18next": "1.1.1",
"gatsby-plugin-remote-images": "3.1.1",

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;

9
yarn.lock
View file

@ -1062,7 +1062,7 @@
core-js-pure "^3.16.0"
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.15.4"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@ -5852,6 +5852,13 @@ gatsby-plugin-page-creator@^3.14.0:
globby "^11.0.4"
lodash "^4.17.21"
gatsby-plugin-portal@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/gatsby-plugin-portal/-/gatsby-plugin-portal-1.0.7.tgz#c2ff2cb2bbec27e0ae9ab610857f603197189dc0"
integrity sha512-Drb2zj9qOVbt+/miINhyT7IvUaY+z/sxFT+0+p0yX4theKSVJgtu0YisA+DFlCmNl+KE6VjbqANZ0HUh6aWVMA==
dependencies:
"@babel/runtime" "^7.3.1"
gatsby-plugin-react-helmet@4.14.0:
version "4.14.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-4.14.0.tgz#69fe0bd90d65356a0aa144d4e8d75d2559638514"