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">
-          <button
-            className="hover:underline text-vibrant-light hover:text-muted-light arrow-left-before  mr-1"
-            onClick={() => navigate(-1)}
-            type="button"
-          >
-            back
-          </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>
+        <Nav className="mb-4" internalLinks={[
+          { href: '/', label: "Home"},
+          { href: getGalleryPageUrl(
+            { keyword: filterKeyword, sortKey },
+            image.base
+          ), label: <>Gallery <kbd>esc</kbd></>}
+        ]} isClient={isClient} />
         <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;