nav design

src/components/Nav.tsx

@@ -5,84 +5,20 @@ import useDimensions from "react-cool-dimensions";
 
 import Menu from "@spectrum-icons/workflow/Menu";
 
-interface NavProps {
+const navClasses = "hover:underline hover:bg-gray-900 block p-3 text-gray-200";
-  isClient?: boolean;
-  className?: string;
-  internalLinks: {
-    href: string;
-    label: string;
-  }[];
-}
 
-const Nav = ({ isClient, internalLinks, className }: NavProps) => {
+const ExternalLinks = ({ isVertical }: { isVertical: boolean }) => (
-  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 text-gray-200"
-  );
-  return (
-    <nav
-      className={classnames(
-        "p-2 mt-0 flex justify-center w-full font-serif",
-        "text-gray-200 bg-black border-b border-b-white",
-        className
-      )}
-      ref={observe}
-      style={{ zIndex: 100 }}
-    >
-      <div className="p-2">
-        <ul className="inline-flex flex-wrap justify-center">
-          {internalLinks &&
-            internalLinks.map(({ href, label }) => (
-              <li key={href}>
-                <Link
-                  activeClassName="font-bold underline"
-                  className={navClasses}
-                  to={href}
-                >
-                  {label}
-                </Link>
-              </li>
-            ))}
-        </ul>
-        {internalLinks && currentBreakpoint !== "XS" && <span className={navClasses}>|</span>}
-        {currentBreakpoint === "XS" && (
-          <button
-            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 !== "XS" || linksMenu) && (
   <ul
     className={classnames(
-              "z-30",
+      "z-30 bg-black rounded overflow-hidden",
-              currentBreakpoint !== "XS"
+      isVertical
         ? "inline-flex flex-wrap justify-center"
-                : "absolute p-2 rounded-md mt-2",
+        : "absolute rounded-md top-[40px] border border-white"
-              currentBreakpoint === "XS" &&
-                (isClient
-                  ? "bg-vibrant-dark cool-border-small-light"
-                  : "bg-black border border-white")
     )}
   >
     <li>
       {/* eslint-disable-next-line */}
-              <a
+      <a className={navClasses} href="https://buzzwords.gg" target="_blank">
-                className={navClasses}
-                href="https://buzzwords.gg"
-                target="_blank"
-              >
         Buzzwords
       </a>
     </li>
@@ -132,6 +68,69 @@ const Nav = ({ isClient, internalLinks, className }: NavProps) => {
       </a>
     </li>
   </ul>
+);
+
+interface NavProps {
+  className?: string;
+  internalLinks: {
+    href: string;
+    label: string;
+  }[];
+}
+
+const Nav = ({ internalLinks, className }: NavProps) => {
+  const { observe, currentBreakpoint } = useDimensions({
+    breakpoints: { XS: 0, LG: 690 },
+    updateOnBreakpointChange: true,
+  });
+  const [linksMenu, setLinksMenu] = useState(false);
+
+  return (
+    <nav
+      className={classnames(
+        "mt-0 flex justify-center w-full font-serif",
+        "text-gray-200 bg-black border-b border-b-white",
+        className
+      )}
+      ref={observe}
+      style={{ zIndex: 100 }}
+    >
+      <div className="flex">
+        <ul className="inline-flex flex-wrap justify-center">
+          {internalLinks &&
+            internalLinks.map(({ href, label }) => (
+              <li key={href}>
+                <Link
+                  activeClassName="font-bold underline"
+                  className={navClasses}
+                  to={href}
+                >
+                  {label}
+                </Link>
+              </li>
+            ))}
+        </ul>
+        {internalLinks && currentBreakpoint !== "XS" && (
+          <span className="block p-3 text-gray-200">|</span>
+        )}
+        {currentBreakpoint === "XS" && (
+          <button
+            className={classnames(
+              "mx-2 hover:underline inline-flex align-middle items-center",
+              navClasses
+            )}
+            onClick={() => setLinksMenu(!linksMenu)}
+          >
+            <Menu
+              UNSAFE_className="mr-1"
+              aria-label="show external links"
+              size="S"
+            />
+            Links
+          </button>
+        )}
+        {(currentBreakpoint !== "XS" || linksMenu) && (
+          <ExternalLinks isVertical={currentBreakpoint !== "XS"} />
         )}
       </div>
     </nav>