Merge branch 'responsive-nav' into main

package.json

@@ -58,6 +58,7 @@
     "postcss-nested": "^5.0.5",
     "ramda": "^0.27.1",
     "react": "^17.0.1",
+    "react-cool-dimensions": "^2.0.7",
     "react-div-100vh": "^0.7.0",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

src/breakpoints.js

@@ -4,7 +4,10 @@ const R = require('ramda')
 const resolveConfig = require('tailwindcss/resolveConfig');
 const tailwindConfig = require('../tailwind.config.js');
 const {theme} = resolveConfig(tailwindConfig);
-module.exports = R.map(size => parseInt(size, 10), theme.screens);
+module.exports = R.pipe(
+  R.map(size => parseInt(size, 10)),
+  R.filter(Boolean)
+)(theme.screens);
 `;
 
 export default themeBreakpoints;

src/components/Nav.js

@@ -1,25 +1,34 @@
-import React from "react";
+import React, { useState } from "react";
 import classnames from "classnames";
 import { Link } from "gatsby";
+import useDimensions from "react-cool-dimensions";
 
-const getNavClasses = (isClient) =>
+import Menu from "@spectrum-icons/workflow/Menu";
-  classnames(
+
+const Nav = ({ isClient, internalLinks, className }) => {
+  const { observe, currentBreakpoint } = useDimensions({
+    breakpoints: { XS: 0, LG: 690 },
+    updateOnBreakpointChange: true,
+  });
+  const [linksMenu, setLinksMenu] = useState(false);
+
+  const navClasses = classnames(
     "hover:underline mx-2 md:mx-3",
     isClient ? "text-vibrant-light" : "text-gray-200"
   );
-
+  return (
-const Nav = ({ isClient, internalLinks, className }) => (
     <nav
       className={classnames(
-      "m-2 flex justify-center font-sans",
+        "m-2 flex justify-center font-sans w-full",
         isClient ? "text-vibrant-light" : "text-gray-200",
         className
       )}
+      ref={observe}
       style={{ zIndex: 100 }}
     >
       <div
         className={classnames(
-        "rounded-full p-2 ]",
+          "rounded-full p-2",
           isClient
             ? "bg-vibrant-dark cool-border-small-light"
             : "border border-white"
@@ -31,25 +40,49 @@ const Nav = ({ isClient, internalLinks, className }) => (
               <li key={href}>
                 <Link
                   activeClassName="font-bold underline"
-                className={getNavClasses(isClient)}
+                  className={navClasses}
                   to={href}
                 >
                   {label}
                 </Link>
               </li>
             ))}
-        {internalLinks && <>|</>}
+        </ul>
-        <li>
+        {internalLinks && currentBreakpoint === "LG" && <>|</>}
-          <a
+        {currentBreakpoint === "XS" && (
-            className={getNavClasses(isClient)}
+          <button
-            href="https://twitter.com/chuckletmilk"
+            className="mx-2 hover:underline inline-flex align-middle"
+            onClick={() => setLinksMenu(!linksMenu)}
           >
+            <Menu
+              UNSAFE_className="mr-1"
+              aria-label="show external links"
+              size="S"
+            />
+            Links
+          </button>
+        )}
+        {(currentBreakpoint === "LG" || linksMenu) && (
+          <ul
+            className={classnames(
+              "z-30",
+              currentBreakpoint === "LG"
+                ? "inline-flex flex-wrap justify-center"
+                : "absolute p-2 rounded-md mt-2",
+              currentBreakpoint === "XS" &&
+                (isClient
+                  ? "bg-vibrant-dark cool-border-small-light"
+                  : "bg-black border border-white")
+            )}
+          >
+            <li>
+              <a className={navClasses} href="https://twitter.com/chuckletmilk">
                 Twitter
               </a>
             </li>
             <li>
               <a
-            className={getNavClasses(isClient)}
+                className={navClasses}
                 href="https://www.instagram.com/asubtlebutdeliciouscoffeecake/"
               >
                 Instagram
@@ -57,31 +90,27 @@ const Nav = ({ isClient, internalLinks, className }) => (
             </li>
             <li>
               <a
-            className={getNavClasses(isClient)}
+                className={navClasses}
                 href="https://www.youtube.com/channel/UCknR_DdytuOgzus--b2gZhg"
               >
                 YouTube
               </a>
             </li>
             <li>
-          <a
+              <a className={navClasses} href="https://github.com/chuckdries">
-            className={getNavClasses(isClient)}
-            href="https://github.com/chuckdries"
-          >
                 GitHub
               </a>
             </li>
             <li>
-          <a
+              <a className={navClasses} href="mailto:chuck@chuckdries.com">
-            className={getNavClasses(isClient)}
-            href="mailto:chuck@chuckdries.com"
-          >
                 chuck@chuckdries.com
               </a>
             </li>
           </ul>
+        )}
       </div>
     </nav>
   );
+};
 
 export default Nav;

src/pages/index.js

@@ -137,7 +137,7 @@ const IndexPage = ({
           <Nav
             internalLinks={[
               { href: "/", label: "Home" },
-              { href: "/photogallery/", label: "Photography Gallery" },
+              { href: "/photogallery/", label: "Gallery" },
             ]}
             isClient={isClient}
           />

yarn.lock

@@ -12362,6 +12362,11 @@ rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-cool-dimensions@^2.0.7:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/react-cool-dimensions/-/react-cool-dimensions-2.0.7.tgz#2fe6657608f034cd7c89f149ed14e79cf1cb2d50"
+  integrity sha512-z1VwkAAJ5d8QybDRuYIXTE41RxGr5GYsv1bQhbOBE8cMfoZQZpcF0odL64vdgrQVzat2jayedj1GoYi80FWcbA==
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"