Develop global nav and remove resume

src/components/GalleryImage/GalleryImage.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { graphql, navigate, Link } from "gatsby";
 import { GatsbyImage, getImage } from "gatsby-plugin-image";
 import { Helmet } from "react-helmet";
@@ -26,6 +26,7 @@ import {
   getGalleryPageUrl,
 } from "../../utils";
 import MetadataItem from "./MetadataItem";
+import Nav from "../Nav";
 
 const logKeyShortcut = (keyCode) => {
   try {
@@ -53,6 +54,9 @@ const GalleryImage = ({
   const ar = getAspectRatio(image);
 
   const [zoom, setZoom] = useState(false);
+  const [isClient, setIsClient] = useState(true);
+
+  useEffect(() => {setIsClient(true)}, [])
 
   const nextIndex =
     sortedImageList && currentIndex < sortedImageList.length
@@ -149,30 +153,13 @@ const GalleryImage = ({
         />
       </Helmet>
       <div className="min-h-screen flex flex-col justify-between">
-        <nav className="mt-1 ml-1 text-lg mb-4">
+        <Nav className="mb-4" internalLinks={[
-          <button
+          { href: '/', label: "Home"},
-            className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
+          { href: getGalleryPageUrl(
-            onClick={() => navigate(-1)}
+            { keyword: filterKeyword, sortKey },
-            type="button"
+            image.base
-          >
+          ), label: <>Gallery <kbd>esc</kbd></>}
-            back
+        ]} isClient={isClient} />
-          </button>
-          <Link
-            className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-            to="/"
-          >
-            home
-          </Link>
-          <Link
-            className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-            to={getGalleryPageUrl(
-              { keyword: filterKeyword, sortKey },
-              image.base
-            )}
-          >
-            gallery <span className="bg-gray-300 text-black">esc</span>
-          </Link>
-        </nav>
         <div className="flex justify-between flex-auto items-center lg:gap-2">
           {prevImage && (
             <Link

src/components/Nav.js

@@ -0,0 +1,95 @@
+import React from "react";
+import classnames from "classnames";
+import { Link } from "gatsby";
+
+const getNavClasses = (isClient) =>
+  classnames(
+    "hover:underline mx-2 md:mx-3",
+    isClient ? "text-vibrant-light" : "text-gray-200"
+  );
+
+const Nav = ({ isClient, internalLinks, className }) => (
+  <nav
+    className={classnames("m-2 flex justify-center", className)}
+    style={{ zIndex: 100 }}
+  >
+    <div
+      className={classnames(
+        "rounded-full p-2 ]",
+        isClient
+          ? "bg-vibrant-dark cool-border-small-light"
+          : "border border-white"
+      )}
+    >
+      <ul className="inline-flex flex-wrap justify-center">
+        {internalLinks &&
+          internalLinks.map(({ href, label }) => (
+            <li key={href}>
+              <Link className={getNavClasses(isClient)} to={href}>
+                {label}
+              </Link>
+            </li>
+          ))}
+        {internalLinks && <>|</>}
+        <li>
+          <a
+            className={getNavClasses(isClient)}
+            href="https://twitter.com/chuckletmilk"
+          >
+            Twitter
+          </a>
+        </li>
+        <li>
+          <a
+            className={getNavClasses(isClient)}
+            href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/"
+          >
+            Instagram
+          </a>
+        </li>
+        <li>
+          <a
+            className={getNavClasses(isClient)}
+            href="https://github.com/chuckdries"
+          >
+            Github
+          </a>
+        </li>
+        <li>
+          <a
+            className={getNavClasses(isClient)}
+            href="https://www.linkedin.com/in/chuckdries/"
+          >
+            LinkedIn
+          </a>
+        </li>
+        <li>
+          <a
+            className={getNavClasses(isClient)}
+            href="https://medium.com/@chuckdries"
+          >
+            Medium
+          </a>
+        </li>
+        <li>
+          <a
+            className={getNavClasses(isClient)}
+            href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg"
+          >
+            YouTube
+          </a>
+        </li>
+        <li>
+          <a
+            className={getNavClasses(isClient)}
+            href="mailto:chuck@chuckdries.com"
+          >
+            chuck@chuckdries.com
+          </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+);
+
+export default Nav;

src/components/index/Nav.js

@@ -1,98 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-
-const getNavClasses = (isClient) =>
-  classnames(
-    "hover:underline mx-2 md:mx-3",
-    isClient ? "text-vibrant-light" : "text-gray-200"
-  );
-
-const Nav = ({ imageIsLandscape, isClient }) => (
-  <nav
-    className={classnames(
-      // imageIsLandscape
-      //   ? "landscape:w-screen portrait:rounded-3xl portrait:m-2"
-      //   : "portrait:w-screen landscape:rounded-3xl landscape:m-2",
-      "rounded-3xl m-2",
-      "p-2 flex justify-center",
-      isClient && "bg-vibrant-dark cool-border-small-light"
-    )}
-    style={{ zIndex: 100 }}
-  >
-    <ul className="inline-flex flex-wrap justify-center">
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="/CharlesDriesResumeCurrent.pdf"
-          onClick={() => {
-            try {
-              window.plausible("Resume Click");
-            } catch {
-              // do nothing
-            }
-          }}
-        >
-          Resume
-        </a>
-      </li>
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="https://twitter.com/chuckletmilk"
-        >
-          Twitter
-        </a>
-      </li>
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/"
-        >
-          Instagram
-        </a>
-      </li>
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="https://github.com/chuckdries"
-        >
-          Github
-        </a>
-      </li>
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="https://www.linkedin.com/in/chuckdries/"
-        >
-          LinkedIn
-        </a>
-      </li>
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="https://medium.com/@chuckdries"
-        >
-          Medium
-        </a>
-      </li>
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg"
-        >
-          YouTube
-        </a>
-      </li>
-      <li>
-        <a
-          className={getNavClasses(isClient)}
-          href="mailto:chuck@chuckdries.com"
-        >
-          chuck@chuckdries.com
-        </a>
-      </li>
-    </ul>
-  </nav>
-);
-
-export default Nav;

src/pages/index.js

@@ -8,7 +8,7 @@ import classnames from "classnames";
 import '../styles/index.css';
 
 import { getHelmetSafeBodyStyle, getVibrant, getAspectRatio } from "../utils";
-import Nav from "../components/index/Nav";
+import Nav from "../components/Nav";
 import ActionButtons from "../components/index/ActionButtons";
 import { use100vh } from "react-div-100vh";
 
@@ -134,7 +134,7 @@ const IndexPage = ({
           )}
           style={{ gridArea: "1/1" }}
         >
-          <Nav imageIsLandscape={imageIsLandscape} isClient={isClient} />
+          <Nav isClient={isClient} />
           <div
             className={classnames(
               "rounded-[50px] p-3 md:p-5 flex flex-col items-center z-10 border-r-[20px] border-b-[20px] mb-3 mx-2 md:mb-[-90px]",

src/pages/photogallery.js

@@ -8,6 +8,7 @@ import { Picker, Item } from "@adobe/react-spectrum";
 import MasonryGallery from "../components/MasonryGallery";
 import KeywordsPicker from "../components/KeywordsPicker";
 import { getGalleryPageUrl } from "../utils";
+import Nav from "../components/Nav";
 
 const SORT_KEYS = {
   hue: ["fields", "imageMeta", "vibrantHue"],
@@ -69,7 +70,7 @@ const GalleryPage = ({ data }) => {
   );
 
   const removeHash = React.useCallback(() => {
-    console.log('rh')
+    console.log("rh");
     const url = new URL(
       typeof window !== "undefined"
         ? window.location.href.toString()
@@ -90,7 +91,7 @@ const GalleryPage = ({ data }) => {
     if (!el) {
       return;
     }
-    console.log('scrolling into view', el);
+    console.log("scrolling into view", el);
     el.scrollIntoView({
       block: "center",
     });
@@ -150,27 +151,14 @@ const GalleryPage = ({ data }) => {
         <body className="bg-black text-white" />
       </Helmet>
       <div className="sm:sticky top-0 z-10 bg-black">
-        <nav className="mt-1 ml-1 text-lg mb-4">
+        <Nav
-          <button
+          className="mb-4"
-            className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
+          internalLinks={[
-            onClick={() => navigate(-1)}
+            { href: "/", label: "Home" },
-            type="button"
+            { href: "/photogallery/", label: "Gallery" },
-          >
+          ]}
-            back
+        >
-          </button>
+        </Nav>
-          <Link
-            className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-            to="/"
-          >
-            home
-          </Link>
-          <Link
-            className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
-            to="/photogallery/"
-          >
-            gallery
-          </Link>
-        </nav>
         <div className="flex flex-col md:flex-row md:items-end justify-between">
           <h1 className="text-5xl mt-0 ml-5 mr-5 font-serif font-black z-10">
             Photo Gallery

src/styles/global.css

@@ -78,18 +78,6 @@ a {
   @apply text-blue-600;
 }
 
-.arrow-right-after:after {
+kbd {
-  content: "\279C";
+    @apply bg-gray-300 text-black border border-gray-700 rounded p-1;
-  margin-left: 3px;
+}
-  transform: translate(0px);
-  display: inline-block;
-  transition: all 0.2s;
-}
-
-.arrow-left-before:before {
-  content: "\21AB";
-  margin-left: 3px;
-  transform: translate(0px);
-  display: inline-block;
-  /* transition: all .2s; */
-}