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 on code

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-04-12 13:02:38 +00:00 • committed by GitHub
parent d542206091
commit b8057f0e25
51 changed files with 28270 additions and 26529 deletions
Download patch file Download diff file Expand all files Collapse all files

87
src/components/navigation.js
View file

@ -1,26 +1,26 @@
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 React, { useEffect, useState } from "react";
import PropTypes from "prop-types";
import { Trans, Link } from "gatsby-plugin-react-i18next";
import { graphql, StaticQuery } from "gatsby";
import * as styles from './navigation.module.scss'
import * as styles from "./navigation.module.scss";
const Navigation = ({ isHome }) => {
let [atTop, setAtTop] = useState(false);
const updateTransparency = () => {
if(typeof window === "undefined") return;
if (typeof window === "undefined") return;
// eslint-disable-next-line no-undef
if (window.scrollY < 15) {
if(!atTop) setAtTop(true);
if (!atTop) setAtTop(true);
} else {
if(atTop) setAtTop(false);
if (atTop) setAtTop(false);
}
}
};
useEffect(() => {
if(typeof window === "undefined") return;
if (typeof window === "undefined") return;
// eslint-disable-next-line no-undef
window.addEventListener("scroll", updateTransparency);
@ -30,7 +30,7 @@ const Navigation = ({ isHome }) => {
updateTransparency();
// eslint-disable-next-line no-undef
let int = window.setInterval(updateTransparency, 10000)
let int = window.setInterval(updateTransparency, 10000);
return () => {
// eslint-disable-next-line no-undef
@ -40,33 +40,52 @@ const Navigation = ({ isHome }) => {
// eslint-disable-next-line no-undef
window.clearInterval(int);
}
};
});
return (
<div className={styles.topBar + (isHome ? " "+styles.homeBar : "") + (atTop ? " "+styles.homeBarTransparent : "")}>
<nav className={styles.topBarInner}>
<StaticQuery query={graphql`
query {
site {
siteMetadata {
title
}
}
}
`} render={data => (
<Link to="/" activeClassName={styles.active}>{data.site.siteMetadata.title}</Link>
)} />
<div className="flexSpacer"></div>
<Link id="navBtnProjects" to="/projects" activeClassName={styles.active}><Trans>projects</Trans></Link>
<Link id="navBtnSocial" to="/social" activeClassName={styles.active}><Trans>social</Trans></Link>
</nav>
</div>
<div
className={
styles.topBar +
(isHome ? " " + styles.homeBar : "") +
(atTop ? " " + styles.homeBarTransparent : "")
}
>
<nav className={styles.topBarInner}>
<StaticQuery
query={graphql`
query {
site {
siteMetadata {
title
}
}
}
`}
render={(data) => (
<Link to="/" activeClassName={styles.active}>
{data.site.siteMetadata.title}
</Link>
)}
/>
<div className="flexSpacer"></div>
<Link
id="navBtnProjects"
to="/projects"
activeClassName={styles.active}
>
<Trans>projects</Trans>
</Link>
<Link id="navBtnSocial" to="/social" activeClassName={styles.active}>
<Trans>social</Trans>
</Link>
</nav>
</div>
);
}
};
Navigation.propTypes = {
isHome: PropTypes.bool.isRequired
}
isHome: PropTypes.bool.isRequired,
};
export default Navigation;
export default Navigation;