Rework homepage concept

src/components/navigation.js

@@ -1,12 +1,56 @@
+/* eslint-disable no-undef */
 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 { createPortal } from "react-dom";
 
 import * as styles from "./navigation.module.scss";
+import { X } from "lucide-react";
+import { Fade as Hamburger } from 'hamburger-react';
+
+const OffScreenNav = ({active, close}) => {
+    if(typeof window === "undefined") {
+        return null;
+    }
+
+    return createPortal(<div className={styles.offscreenNav + " " + (active ? styles.active : "")}>
+        <div className={styles.inner}>
+            <button className={styles.close} onClick={close}><X/></button>
+            <span><Trans>menu</Trans></span>
+            <Link to="/" activeClassName={styles.active}>
+                <Trans>home</Trans>
+            </Link>
+            <Link
+                id="navBtnProjects"
+                to="/about"
+                activeClassName={styles.active}
+            >
+                <Trans>about</Trans>
+            </Link>
+            <Link
+                id="navBtnProjects"
+                to="/projects"
+                activeClassName={styles.active}
+            >
+                <Trans>projects</Trans>
+            </Link>
+            <Link
+                id="navBtnSocial"
+                to="/social"
+                activeClassName={styles.active}
+            >
+                <Trans>social</Trans>
+            </Link>
+        </div>
+    </div>, window.document.body)
+}
 
 const Navigation = ({ isHome }) => {
     let [atTop, setAtTop] = useState(false);
+    const [offscreenNavActive, setOffscreenNavActive] = useState(false);
+
+    const closeOffscreenNav = () => setOffscreenNavActive(false);
 
     const updateTransparency = () => {
         if (typeof window === "undefined") return;
@@ -52,6 +96,7 @@ const Navigation = ({ isHome }) => {
             }
         >
             <nav className={styles.topBarInner}>
+                <OffScreenNav active={offscreenNavActive} close={closeOffscreenNav} />
                 <StaticQuery
                     query={graphql`
                         query {
@@ -63,12 +108,19 @@ const Navigation = ({ isHome }) => {
                         }
                     `}
                     render={(data) => (
-                        <Link to="/" activeClassName={styles.active}>
+                        <Link to="/" activeClassName={styles.active} className={styles.logo}>
                             {data.site.siteMetadata.title}
                         </Link>
                     )}
                 />
                 <div className="flexSpacer"></div>
+                <Link
+                    id="navBtnProjects"
+                    to="/about"
+                    activeClassName={styles.active}
+                >
+                    <Trans>about</Trans>
+                </Link>
                 <Link
                     id="navBtnProjects"
                     to="/projects"
@@ -83,6 +135,7 @@ const Navigation = ({ isHome }) => {
                 >
                     <Trans>social</Trans>
                 </Link>
+                <div className={styles.hamburger}><Hamburger toggle={setOffscreenNavActive} toggled={offscreenNavActive} rounded size={30} /></div>
             </nav>
         </div>
     );

src/components/navigation.module.scss

@@ -1,6 +1,75 @@
 @import "../variables";
 @import "../mixins";
 
+.offscreenNav {
+    position: fixed;
+    top: 0;
+    left: 120px;
+    width: 100%;
+    height: 100%;
+    z-index: 1200;
+    background-color: rgba($background, 0.9);
+    backdrop-filter: blur(10px);
+    color: white;
+    overflow: auto;
+    opacity: 0;
+    transition: opacity .25s, left .25s;
+    pointer-events: none;
+    overscroll-behavior: contain;
+
+    &.active {
+        left: 0;
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    @media(prefers-color-scheme: light) {
+        background-color: rgba($lightBackground, 0.9);
+        color: black;
+    }
+
+    .inner {
+        display: flex;
+        flex-direction: column;
+        max-width: $layoutWidth;
+        margin: 0 auto;
+        position: relative;
+
+        text-align: center;
+        font-size: 1.25em;
+
+        .close {
+            position: absolute;
+            top: 0;
+            right: 0;
+            padding: $layoutPadding;
+            color: inherit;
+            background-color: transparent;
+            border: none;
+            font: inherit;
+        }
+
+        > a {
+            text-decoration: underline dotted currentColor;
+        }
+
+        > * {
+            padding: $layoutPadding;
+            color: inherit;
+
+            &.active {
+                border-left: 3px solid white;
+                border-right: 3px solid white;
+
+                @media(prefers-color-scheme: light) {
+                    border-left: 3px solid black;
+                    border-right: 3px solid black;
+                }
+            }
+        }
+    }
+}
+
 .topBar {
     position: fixed;
     top: 0;
@@ -40,8 +109,18 @@
             padding-right: $layoutPadding;
         }
 
+        .hamburger {
+            display: none;
+            height: 43px;
+
+            @media(max-width: 500px) {
+                display: block;
+            }
+        }
+
         a {
-            display: block;
+            display: flex;
+            align-items: center;
             padding: 10px $layoutPadding;
             color: inherit;
             text-decoration: none;
@@ -59,6 +138,12 @@
                     border-color: $accentColor;
                 }
             }
+
+            @media(max-width: 500px) {
+                &:not(.logo) {
+                    display: none;
+                }
+            }
         }
     }
 }