diff --git a/gatsby-browser.js b/gatsby-browser.js
deleted file mode 100644
index fe61893..0000000
--- a/gatsby-browser.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable no-undef */
-let $ = require("jquery");
-
-$(function () {
- $(window).on("scroll", function () {
- performUpdate();
- });
-
- $(window).on("navigate", function () {
- performUpdate();
- });
-
- window.setInterval(performUpdate, 500);
-});
-
-function performUpdate() {
- if (window.scrollY < 15) {
- $(".topBar").addClass("homeBarTransparent");
- } else {
- $(".topBar").removeClass("homeBarTransparent");
- }
-}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 2c680ea..bc6479c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15292,11 +15292,6 @@
"resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.3.tgz",
"integrity": "sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q=="
},
- "jquery": {
- "version": "3.6.0",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
- "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
- },
"js-base64": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
diff --git a/package.json b/package.json
index 5b1526f..ffbcfaf 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
"gatsby-transformer-json": "3.2.0",
"gatsby-transformer-sharp": "3.2.0",
"i18next": "20.1.0",
- "jquery": "3.6.0",
"locale": "0.1.0",
"node-sass": "4.14.1",
"prop-types": "15.7.2",
diff --git a/src/components/navigation.js b/src/components/navigation.js
index fa94ec1..75733ec 100644
--- a/src/components/navigation.js
+++ b/src/components/navigation.js
@@ -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;
\ No newline at end of file
diff --git a/src/components/navigation.module.scss b/src/components/navigation.module.scss
new file mode 100644
index 0000000..cdec6a2
--- /dev/null
+++ b/src/components/navigation.module.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/layouts/default.scss b/src/layouts/default.scss
index 1c16af0..a3a963a 100644
--- a/src/layouts/default.scss
+++ b/src/layouts/default.scss
@@ -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;