Improve navigation styles and remove jquery

gatsby-browser.js

@@ -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");
-    }
-}

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",

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",

src/components/navigation.js

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

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;
+}

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;