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

Improve navigation styles and remove jquery

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-04-12 12:37:15 +00:00 • committed by GitHub
parent c577b841e8
commit e59d4c72a4
6 changed files with 134 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/components/navigation.js
View file

@ -1,34 +1,73 @@
import React from "react"
import PropTypes from "prop-types"
import { Trans, Link } from "gatsby-plugin-react-i18next"
import { graphql, StaticQuery } from 'gatsby'
const Navigation = ({ isHome, module }) => {
return (
<div className={"topBar" + (isHome ? " homeBar" : "")}>
<nav className="topBarInner">
<StaticQuery query={graphql`
query {
site {
siteMetadata {
title
}
}
}
`} render={data => (
<Link to="/" className={"logo" + (module === "home" ? " active" : "")}>{data.site.siteMetadata.title}</Link>
)} />
<div className="flexSpacer"></div>
<Link id="navBtnProjects" to="/projects" className={(module === "projects" ? "active" : "")}><Trans>projects</Trans></Link>
<Link id="navBtnSocial" to="/social" className={(module === "social" ? "active" : "")}><Trans>social</Trans></Link>
</nav>
</div>
);
}
Navigation.propTypes = {
isHome: PropTypes.bool.isRequired,
module: PropTypes.string.isRequired
}
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,
module: PropTypes.string.isRequired
}
export default Navigation;