Merge pull request #1966 from dubinc/nav-dismissal

Dismiss nav when links are clicked
dubinc · Feb 3, 2025 · 7c86c69 · 7c86c69
2 parents 1635cb8 + e5095ff
commit 7c86c69
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 139 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dub/ui",
   "description": "UI components for Dub.co",
-  "version": "0.2.19",
+  "version": "0.2.20",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

diff --git a/packages/ui/src/nav/content/product-content.tsx b/packages/ui/src/nav/content/product-content.tsx
@@ -1,4 +1,5 @@
 import { cn, createHref } from "@dub/utils";
+import { Link as NavigationMenuLink } from "@radix-ui/react-navigation-menu";
 import Link from "next/link";
 import { COMPARE_PAGES, CUSTOMER_STORIES } from "../../content";
 import { ConnectedDotsFill, CubeSettingsFill } from "../../icons";
@@ -30,47 +31,51 @@ export function ProductContent({ domain }: { domain: string }) {
   return (
     <div className="grid w-[1020px] grid-cols-[minmax(0,1fr),0.4fr] divide-x divide-gray-200">
       <div className="grid grid-cols-2 gap-4 p-4">
-        <Link
-          href={createHref(
-            "/home",
-            domain,
-            getUtmParams({ domain, utm_content: "Dub Links" }),
-          )}
-          className="group relative flex flex-col overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 dark:border-white/20 dark:bg-white/10"
-        >
-          <div className="p-5 pb-0">
-            <span className="text-sm font-medium text-neutral-900 dark:text-white">
-              Dub Links
-            </span>
-            <p className="mt-3 max-w-56 text-sm text-neutral-500 dark:text-white/60">
-              Short links with superpowers for the modern marketer
-            </p>
-          </div>
-          <div className="relative grow overflow-hidden">
-            <LinksGraphic className="absolute bottom-0 h-auto w-full [mask-image:linear-gradient(transparent,black_20%,black_80%,transparent)]" />
-          </div>
-          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,#f4950c,transparent)] opacity-[0.07] transition-opacity duration-150 group-hover:opacity-[0.2]" />
-        </Link>
-        <div className="flex flex-col gap-4">
+        <NavigationMenuLink asChild>
           <Link
             href={createHref(
-              "/analytics",
+              "/home",
               domain,
-              getUtmParams({ domain, utm_content: "Dub Analytics" }),
+              getUtmParams({ domain, utm_content: "Dub Links" }),
             )}
             className="group relative flex flex-col overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 dark:border-white/20 dark:bg-white/10"
           >
-            <AnalyticsGraphic className="absolute bottom-0 h-auto w-full translate-y-[15%] [mask-image:linear-gradient(90deg,transparent,black)]" />
-            <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,#36D78F,transparent)] opacity-[0.07] transition-opacity duration-150 group-hover:opacity-[0.2]" />
-            <div className="h-56 p-5">
+            <div className="p-5 pb-0">
               <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                Dub Analytics
+                Dub Links
               </span>
-              <p className="mt-3 max-w-48 text-sm text-neutral-500 dark:text-white/60">
-                Powerful real-time analytics with conversion tracking
+              <p className="mt-3 max-w-56 text-sm text-neutral-500 dark:text-white/60">
+                Short links with superpowers for the modern marketer
               </p>
             </div>
+            <div className="relative grow overflow-hidden">
+              <LinksGraphic className="absolute bottom-0 h-auto w-full [mask-image:linear-gradient(transparent,black_20%,black_80%,transparent)]" />
+            </div>
+            <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,#f4950c,transparent)] opacity-[0.07] transition-opacity duration-150 group-hover:opacity-[0.2]" />
           </Link>
+        </NavigationMenuLink>
+        <div className="flex flex-col gap-4">
+          <NavigationMenuLink asChild>
+            <Link
+              href={createHref(
+                "/analytics",
+                domain,
+                getUtmParams({ domain, utm_content: "Dub Analytics" }),
+              )}
+              className="group relative flex flex-col overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 dark:border-white/20 dark:bg-white/10"
+            >
+              <AnalyticsGraphic className="absolute bottom-0 h-auto w-full translate-y-[15%] [mask-image:linear-gradient(90deg,transparent,black)]" />
+              <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_50%_100%,#36D78F,transparent)] opacity-[0.07] transition-opacity duration-150 group-hover:opacity-[0.2]" />
+              <div className="h-56 p-5">
+                <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                  Dub Analytics
+                </span>
+                <p className="mt-3 max-w-48 text-sm text-neutral-500 dark:text-white/60">
+                  Powerful real-time analytics with conversion tracking
+                </p>
+              </div>
+            </Link>
+          </NavigationMenuLink>
           <div className="grid grow grid-rows-2 gap-4">
             {largeLinks.map(({ title, description, icon, href }) => (
               <LargeLinkCard

diff --git a/packages/ui/src/nav/content/resources-content.tsx b/packages/ui/src/nav/content/resources-content.tsx
@@ -1,4 +1,5 @@
 import { cn, createHref } from "@dub/utils";
+import { Link as NavigationMenuLink } from "@radix-ui/react-navigation-menu";
 import Image from "next/image";
 import Link from "next/link";
 import { SDKS } from "../../content";
@@ -29,42 +30,44 @@ export function ResourcesContent({ domain }: { domain: string }) {
     <div className="grid w-[1020px] grid-cols-[minmax(0,1fr),0.4fr] divide-x divide-neutral-200">
       <div className="grid grid-cols-2 gap-4 p-4">
         {mainLinks.map(({ title, description, thumbnail, href }) => (
-          <Link
-            key={title}
-            href={createHref(
-              href,
-              domain,
-              getUtmParams({ domain, utm_content: title }),
-            )}
-            className={cn(
-              "group relative flex flex-col overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 transition-colors duration-75 hover:bg-neutral-100/80",
-              "dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/15",
-            )}
-          >
-            <div className="p-5 pb-0">
-              <span className="text-sm font-medium text-neutral-900 dark:text-white">
-                {title}
-              </span>
-              <p className="mt-3 max-w-56 text-sm text-neutral-500 dark:text-white/60">
-                {description}
-              </p>
-            </div>
-            <div className="relative mt-7 grow overflow-hidden pl-5 [mask-image:linear-gradient(90deg,black_50%,transparent)]">
-              <div
-                className={cn(
-                  "relative size-full overflow-hidden rounded-tl-lg border-l border-t border-black/10",
-                  "[mask-image:linear-gradient(black_50%,transparent)]",
-                )}
-              >
-                <Image
-                  src={thumbnail}
-                  alt={`${title} thumbnail`}
-                  fill
-                  className="bg-white object-cover object-left-top grayscale transition-[filter] duration-75 group-hover:grayscale-0 dark:opacity-50"
-                />
+          <NavigationMenuLink asChild>
+            <Link
+              key={title}
+              href={createHref(
+                href,
+                domain,
+                getUtmParams({ domain, utm_content: title }),
+              )}
+              className={cn(
+                "group relative flex flex-col overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 transition-colors duration-75 hover:bg-neutral-100/80",
+                "dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/15",
+              )}
+            >
+              <div className="p-5 pb-0">
+                <span className="text-sm font-medium text-neutral-900 dark:text-white">
+                  {title}
+                </span>
+                <p className="mt-3 max-w-56 text-sm text-neutral-500 dark:text-white/60">
+                  {description}
+                </p>
+              </div>
+              <div className="relative mt-7 grow overflow-hidden pl-5 [mask-image:linear-gradient(90deg,black_50%,transparent)]">
+                <div
+                  className={cn(
+                    "relative size-full overflow-hidden rounded-tl-lg border-l border-t border-black/10",
+                    "[mask-image:linear-gradient(black_50%,transparent)]",
+                  )}
+                >
+                  <Image
+                    src={thumbnail}
+                    alt={`${title} thumbnail`}
+                    fill
+                    className="bg-white object-cover object-left-top grayscale transition-[filter] duration-75 group-hover:grayscale-0 dark:opacity-50"
+                  />
+                </div>
               </div>
-            </div>
-          </Link>
+            </Link>
+          </NavigationMenuLink>
         ))}
       </div>
       <div className="flex flex-col gap-2 px-6 py-4">
@@ -97,34 +100,36 @@ export function ResourcesContent({ domain }: { domain: string }) {
           </div>
         </div>
         <div className="-mx-2 flex grow flex-col justify-end">
-          <Link
-            href={createHref(
-              "/brand",
-              domain,
-              getUtmParams({ domain, utm_content: "Dub Brand" }),
-            )}
-            className="group relative flex flex-col overflow-hidden rounded-xl bg-black transition-colors duration-75 dark:border dark:border-white/20"
-          >
-            <div className="pointer-events-none absolute inset-0">
-              <div className="absolute -inset-[50%] opacity-30 blur-[20px] transition-opacity duration-300 group-hover:opacity-40 dark:group-hover:opacity-35">
-                <div
-                  className={cn(
-                    "absolute inset-0 rounded-xl",
-                    "bg-[radial-gradient(20%_80%_at_50%_100%,#fd3a4e,transparent),radial-gradient(30%_80%_at_40%_50%,#855afc,transparent),radial-gradient(30%_80%_at_60%_50%,#72fe7d,transparent),radial-gradient(30%_100%_at_50%_50%,#e4c795,transparent)]",
-                  )}
-                />
+          <NavigationMenuLink asChild>
+            <Link
+              href={createHref(
+                "/brand",
+                domain,
+                getUtmParams({ domain, utm_content: "Dub Brand" }),
+              )}
+              className="group relative flex flex-col overflow-hidden rounded-xl bg-black transition-colors duration-75 dark:border dark:border-white/20"
+            >
+              <div className="pointer-events-none absolute inset-0">
+                <div className="absolute -inset-[50%] opacity-30 blur-[20px] transition-opacity duration-300 group-hover:opacity-40 dark:group-hover:opacity-35">
+                  <div
+                    className={cn(
+                      "absolute inset-0 rounded-xl",
+                      "bg-[radial-gradient(20%_80%_at_50%_100%,#fd3a4e,transparent),radial-gradient(30%_80%_at_40%_50%,#855afc,transparent),radial-gradient(30%_80%_at_60%_50%,#72fe7d,transparent),radial-gradient(30%_100%_at_50%_50%,#e4c795,transparent)]",
+                    )}
+                  />
+                </div>
+                <DubWireframeGraphic className="absolute right-0 top-1/2 h-auto w-full -translate-y-1/2 translate-x-[33%] [mask-image:linear-gradient(90deg,#000a,transparent)]" />
               </div>
-              <DubWireframeGraphic className="absolute right-0 top-1/2 h-auto w-full -translate-y-1/2 translate-x-[33%] [mask-image:linear-gradient(90deg,#000a,transparent)]" />
-            </div>
-            <div className="relative flex items-center justify-between px-5 py-4">
-              <div>
-                <span className="block text-sm font-medium text-white">
-                  Dub Brand
-                </span>
-                <p className="text-sm text-white/60">Logos, wordmark, etc.</p>
+              <div className="relative flex items-center justify-between px-5 py-4">
+                <div>
+                  <span className="block text-sm font-medium text-white">
+                    Dub Brand
+                  </span>
+                  <p className="text-sm text-white/60">Logos, wordmark, etc.</p>
+                </div>
               </div>
-            </div>
-          </Link>
+            </Link>
+          </NavigationMenuLink>
         </div>
       </div>
     </div>

diff --git a/packages/ui/src/nav/content/shared.tsx b/packages/ui/src/nav/content/shared.tsx
@@ -1,4 +1,5 @@
 import { cn } from "@dub/utils";
+import { Link as NavigationMenuLink } from "@radix-ui/react-navigation-menu";
 import Link from "next/link";
 import { ComponentProps, ReactNode, SVGProps } from "react";
 import { ExpandingArrow, Icon } from "../../icons";
@@ -35,29 +36,31 @@ export function ContentLinkCard({
   showArrow?: boolean;
 } & ComponentProps<typeof Link>) {
   return (
-    <Link className={cn(contentLinkCardClassName, className)} {...rest}>
-      <div className="flex items-center justify-between gap-3">
-        {icon}
-        <div className="flex-1">
-          <p className="text-sm font-medium text-neutral-700 dark:text-white">
-            {title}
-          </p>
-          {description && (
-            <p
-              className={cn(
-                "text-xs text-neutral-500 dark:text-white/60",
-                ["line-clamp-1", "line-clamp-2"][descriptionLines - 1],
-              )}
-            >
-              {description}
+    <NavigationMenuLink asChild>
+      <Link className={cn(contentLinkCardClassName, className)} {...rest}>
+        <div className="flex items-center justify-between gap-3">
+          {icon}
+          <div className="flex-1">
+            <p className="text-sm font-medium text-neutral-700 dark:text-white">
+              {title}
             </p>
+            {description && (
+              <p
+                className={cn(
+                  "text-xs text-neutral-500 dark:text-white/60",
+                  ["line-clamp-1", "line-clamp-2"][descriptionLines - 1],
+                )}
+              >
+                {description}
+              </p>
+            )}
+          </div>
+          {showArrow && (
+            <ExpandingArrow className="invisible -ml-6 h-4 w-4 text-neutral-700 group-aria-selected:visible sm:group-hover:visible dark:text-white/80" />
           )}
         </div>
-        {showArrow && (
-          <ExpandingArrow className="invisible -ml-6 h-4 w-4 text-neutral-700 group-aria-selected:visible sm:group-hover:visible dark:text-white/80" />
-        )}
-      </div>
-    </Link>
+      </Link>
+    </NavigationMenuLink>
   );
 }
 
@@ -83,13 +86,15 @@ export function ToolLinkCard({
   icon: ReactNode;
 }) {
   return (
-    <Link
-      href={href}
-      className="group relative isolate overflow-hidden rounded-[8px] border border-gray-100 p-3 text-sm font-medium text-gray-800 transition-colors hover:border-gray-200 hover:bg-gray-100 active:bg-gray-200 dark:border-white/20 dark:text-white/80 dark:hover:bg-white/[0.15] dark:active:bg-white/20"
-    >
-      <div className="absolute -bottom-5 -right-3 -z-[1] w-14">{icon}</div>
-      {name}
-    </Link>
+    <NavigationMenuLink asChild>
+      <Link
+        href={href}
+        className="group relative isolate overflow-hidden rounded-[8px] border border-gray-100 p-3 text-sm font-medium text-gray-800 transition-colors hover:border-gray-200 hover:bg-gray-100 active:bg-gray-200 dark:border-white/20 dark:text-white/80 dark:hover:bg-white/[0.15] dark:active:bg-white/20"
+      >
+        <div className="absolute -bottom-5 -right-3 -z-[1] w-14">{icon}</div>
+        {name}
+      </Link>
+    </NavigationMenuLink>
   );
 }
 
@@ -106,26 +111,28 @@ export function LargeLinkCard({
   iconClassName?: string;
 } & ComponentProps<typeof Link>) {
   return (
-    <Link
-      {...rest}
-      className="group relative flex flex-col justify-center rounded-xl border border-neutral-100 bg-neutral-50 transition-colors duration-150 hover:bg-neutral-100 active:bg-neutral-200 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/15 dark:active:bg-white/20"
-    >
-      <div className="flex items-center justify-between px-5 py-4">
-        <div>
-          <span className="text-sm font-medium leading-none text-neutral-900 dark:text-white">
-            {title}
-          </span>
-          <p className="mt-1 text-sm text-neutral-500 dark:text-white/60">
-            {description}
-          </p>
+    <NavigationMenuLink asChild>
+      <Link
+        {...rest}
+        className="group relative flex flex-col justify-center rounded-xl border border-neutral-100 bg-neutral-50 transition-colors duration-150 hover:bg-neutral-100 active:bg-neutral-200 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/15 dark:active:bg-white/20"
+      >
+        <div className="flex items-center justify-between px-5 py-4">
+          <div>
+            <span className="text-sm font-medium leading-none text-neutral-900 dark:text-white">
+              {title}
+            </span>
+            <p className="mt-1 text-sm text-neutral-500 dark:text-white/60">
+              {description}
+            </p>
+          </div>
+          <Icon
+            className={cn(
+              "size-6 text-neutral-700 dark:text-neutral-200",
+              iconClassName,
+            )}
+          />
         </div>
-        <Icon
-          className={cn(
-            "size-6 text-neutral-700 dark:text-neutral-200",
-            iconClassName,
-          )}
-        />
-      </div>
-    </Link>
+      </Link>
+    </NavigationMenuLink>
   );
 }