kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-12 16:37:00 +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;

62
src/components/navigation.module.scss Normal file
View file

@ -0,0 +1,62 @@
@import "../variables";
@import "../mixins";
.topBar {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
background: rgba($background, .95);
backdrop-filter: blur(5px);
z-index: 999;
transition: background .25s;
@supports(backdrop-filter: blur(5px)) {
background: rgba($background, .9);
}
.topBarInner {
display: flex;
width: 100%;
max-width: $layoutWidth;
margin: auto;
> :first-child {
padding-left: $layoutPadding;
}
> :last-child {
padding-right: $layoutPadding;
}
a {
display: block;
padding: 10px $layoutPadding;
color: white;
/*text-decoration: underline dotted white;*/
text-decoration: none;
border-top: 2px solid transparent;
&:hover {
border-color: rgba(255, 255, 255, .25);
}
&.active {
border-color: white;
}
}
}
}
.homeBar.homeBarTransparent {
background: transparent;
backdrop-filter: blur(0);
}
.flexSpacer {
flex-grow: 1;
text-align: center;
}

52
src/layouts/default.scss
View file

@ -42,58 +42,6 @@ footer {
flex-direction: column;
}
.topBar {
position: fixed;
top: 0;
left: 0;
display: flex;
width: 100%;
background: rgba($background, .95);
backdrop-filter: blur(5px);
z-index: 999;
transition: background .25s;
@supports(backdrop-filter: blur(5px)) {
background: rgba($background, .9);
}
.topBarInner {
display: flex;
width: 100%;
max-width: $layoutWidth;
margin: auto;
> :first-child {
padding-left: $layoutPadding;
}
> :last-child {
padding-right: $layoutPadding;
}
a {
display: block;
padding: 10px $layoutPadding;
color: white;
/*text-decoration: underline dotted white;*/
text-decoration: none;
border-top: 2px solid transparent;
&:hover {
border-color: rgba(255, 255, 255, .25);
}
&.active {
border-color: white;
}
}
}
}
.homeBar.homeBarTransparent {
background: transparent;
backdrop-filter: blur(0);
}
.flexSpacer {
flex-grow: 1;