From 2c9aacc1a27c6da2078a8607f0ef417ebb140fe6 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 11 Jul 2022 22:22:10 -0700
Subject: [PATCH] Add internal nav to top nav on homepage

---
 src/components/Nav.js                 | 12 ++++++++++--
 src/components/index/ActionButtons.js | 17 ++++-------------
 src/pages/index.js                    | 10 ++++++++--
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/Nav.js b/src/components/Nav.js
index b9cd416..7410134 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -10,7 +10,11 @@ const getNavClasses = (isClient) =>
 
 const Nav = ({ isClient, internalLinks, className }) => (
   <nav
-    className={classnames("m-2 flex justify-center", className)}
+    className={classnames(
+      "m-2 flex justify-center",
+      isClient ? "text-vibrant-light" : "text-gray-200",
+      className
+    )}
     style={{ zIndex: 100 }}
   >
     <div
@@ -25,7 +29,11 @@ const Nav = ({ isClient, internalLinks, className }) => (
         {internalLinks &&
           internalLinks.map(({ href, label }) => (
             <li key={href}>
-              <Link className={getNavClasses(isClient)} to={href}>
+              <Link
+                activeClassName="font-bold underline"
+                className={getNavClasses(isClient)}
+                to={href}
+              >
                 {label}
               </Link>
             </li>
diff --git a/src/components/index/ActionButtons.js b/src/components/index/ActionButtons.js
index 40492fb..e2d60cb 100644
--- a/src/components/index/ActionButtons.js
+++ b/src/components/index/ActionButtons.js
@@ -2,12 +2,11 @@ import React from "react";
 import classnames from "classnames";
 import { Link } from "gatsby";
 
-import Image from "@spectrum-icons/workflow/Image";
 import Shuffle from "@spectrum-icons/workflow/Shuffle";
 
 const getButtonClasses = (isClient) =>
   classnames(
-    "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 md:py-2 md:px-3 md:my-1 mr-2 text-md hover:underline text-black",
+    "z-20 rounded-md text-md inline-block px-2 py-1 mt-1 mr-2 text-md hover:underline text-black",
     isClient ? "cool-border-small hover:bg-vibrant" : "text-gray-200"
   );
 
@@ -26,10 +25,9 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
       <Link
         className={getButtonClasses(isClient, "muted")}
         id="image-link"
-          title="view image details"
           to={`/photogallery/${image.base}/`}
         >
-          <Image aria-label="view image details" />
+          view image
         </Link>
       <button
         className={getButtonClasses(isClient, "muted")}
@@ -37,18 +35,11 @@ const ActionButtons = ({ isClient, image, shuffleImage }) => (
         onClick={() => {
           shuffleImage(image);
         }}
-        title="shuffle image"
         type="button"
       >
-        <Shuffle aria-label="shuffle image" size="S" />
+        shuffle background
+        <Shuffle UNSAFE_className="ml-1" aria-label="shuffle image" size="XS" />
       </button>
-      <Link
-        className={getButtonClasses(isClient, "muted")}
-        id="photogallery-link"
-        to="/photogallery/"
-      >
-        Photography Gallery
-      </Link>
     </div>
   </div>
 );
diff --git a/src/pages/index.js b/src/pages/index.js
index c12966a..114a5a3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,7 +5,7 @@ import { Helmet } from "react-helmet";
 import { take } from "ramda";
 import classnames from "classnames";
 
-import '../styles/index.css';
+import "../styles/index.css";
 
 import { getHelmetSafeBodyStyle, getVibrant, getAspectRatio } from "../utils";
 import Nav from "../components/Nav";
@@ -134,7 +134,13 @@ const IndexPage = ({
           )}
           style={{ gridArea: "1/1" }}
         >
-          <Nav isClient={isClient} />
+          <Nav
+            internalLinks={[
+              { href: "/", label: "Home" },
+              { href: "/photogallery/", label: "Gallery" },
+            ]}
+            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]",