kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-21 11:57:26 +02:00
Code Issues Projects Releases Wiki Activity

Configure & Run prettier

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-07-25 13:03:57 +00:00 • committed by GitHub
parent 79ab0bb9af
commit 420f8930fd
66 changed files with 31825 additions and 31500 deletions
Download patch file Download diff file Expand all files Collapse all files

183
src/components/navigation.js
View file

@ -1,91 +1,92 @@
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";
const Navigation = ({ isHome }) => {
let [atTop, setAtTop] = useState(false);
const updateTransparency = () => {
if (typeof window === "undefined") return;
// eslint-disable-next-line no-undef
if (window.scrollY < 15) {
if (!atTop) setAtTop(true);
} else {
if (atTop) setAtTop(false);
}
};
useEffect(() => {
if (typeof window === "undefined") return;
// eslint-disable-next-line no-undef
window.addEventListener("scroll", updateTransparency);
// eslint-disable-next-line no-undef
window.addEventListener("navigate", updateTransparency);
updateTransparency();
// eslint-disable-next-line no-undef
let int = window.setInterval(updateTransparency, 10000);
return () => {
// eslint-disable-next-line no-undef
window.removeEventListener("scroll", updateTransparency);
// eslint-disable-next-line no-undef
window.removeEventListener("navigate", updateTransparency);
// 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>
);
};
Navigation.propTypes = {
isHome: PropTypes.bool.isRequired,
};
export default Navigation;
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";
const Navigation = ({ isHome }) => {
let [atTop, setAtTop] = useState(false);
const updateTransparency = () => {
if (typeof window === "undefined") return;
// eslint-disable-next-line no-undef
if (window.scrollY < 15) {
if (!atTop) setAtTop(true);
} else {
if (atTop) setAtTop(false);
}
};
useEffect(() => {
if (typeof window === "undefined") return;
// eslint-disable-next-line no-undef
window.addEventListener("scroll", updateTransparency);
// eslint-disable-next-line no-undef
window.addEventListener("navigate", updateTransparency);
updateTransparency();
// eslint-disable-next-line no-undef
let int = window.setInterval(updateTransparency, 10000);
return () => {
// eslint-disable-next-line no-undef
window.removeEventListener("scroll", updateTransparency);
// eslint-disable-next-line no-undef
window.removeEventListener("navigate", updateTransparency);
// 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>
);
};
Navigation.propTypes = {
isHome: PropTypes.bool.isRequired,
};
export default Navigation;