Portal brand context menu

Author: tannerlinsley

src/components/BrandContextMenu.tsx

@@ -64,67 +64,69 @@ export function BrandContextMenu({ children, ...rest }: BrandContextMenuProps) {
             }}
           />
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content
-          sideOffset={4}
-          align="start"
-          className="z-50 min-w-48 rounded-md border border-gray-200 bg-white p-1 text-sm shadow-lg dark:border-gray-700 dark:bg-gray-900/50 backdrop-blur-md"
-        >
-          {[
-            {
-              label: 'Logo as SVG (Black)',
-              url: '/images/logos/logo-black.svg',
-            },
-            {
-              label: 'Logo as SVG (White)',
-              url: '/images/logos/logo-white.svg',
-              darkBg: true,
-            },
-            {
-              label: 'Wordmark as SVG (Black)',
-              url: '/images/logos/logo-word-black.svg',
-            },
-            {
-              label: 'Wordmark as SVG (White)',
-              url: '/images/logos/logo-word-white.svg',
-              darkBg: true,
-            },
-          ].map(({ label, url, darkBg }) => (
-            <DropdownMenu.Item
-              key={label}
-              className={twMerge(
-                'flex cursor-pointer select-none items-center gap-2 rounded px-3 py-1 outline-none hover:bg-gray-500/20'
-              )}
-              onSelect={async () => {
-                try {
-                  const res = await fetch(url)
-                  const text = await res.text()
-                  await copyText(text)
-                } catch (err) {
-                  console.error('Failed to copy logo', err)
-                }
-              }}
-            >
-              {label}
-              <div
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            sideOffset={4}
+            align="start"
+            className="relative z-[50] min-w-48 rounded-md border border-gray-200 bg-white p-1 text-sm shadow-lg dark:border-gray-700 dark:bg-gray-900/50 backdrop-blur-md"
+          >
+            {[
+              {
+                label: 'Logo as SVG (Black)',
+                url: '/images/logos/logo-black.svg',
+              },
+              {
+                label: 'Logo as SVG (White)',
+                url: '/images/logos/logo-white.svg',
+                darkBg: true,
+              },
+              {
+                label: 'Wordmark as SVG (Black)',
+                url: '/images/logos/logo-word-black.svg',
+              },
+              {
+                label: 'Wordmark as SVG (White)',
+                url: '/images/logos/logo-word-white.svg',
+                darkBg: true,
+              },
+            ].map(({ label, url, darkBg }) => (
+              <DropdownMenu.Item
+                key={label}
                 className={twMerge(
-                  'p-1 rounded-full',
-                  darkBg
-                    ? 'bg-black text-white shadow-lg shadow-white/20'
-                    : 'bg-white text-black shadow-lg'
+                  'flex cursor-pointer select-none items-center gap-2 rounded px-3 py-1 outline-none hover:bg-gray-500/20'
                 )}
+                onSelect={async () => {
+                  try {
+                    const res = await fetch(url)
+                    const text = await res.text()
+                    await copyText(text)
+                  } catch (err) {
+                    console.error('Failed to copy logo', err)
+                  }
+                }}
               >
-                <img src={url} alt={label} className="h-6" />
-              </div>
+                {label}
+                <div
+                  className={twMerge(
+                    'p-1 rounded-full',
+                    darkBg
+                      ? 'bg-black text-white shadow-lg shadow-white/20'
+                      : 'bg-white text-black shadow-lg'
+                  )}
+                >
+                  <img src={url} alt={label} className="h-6" />
+                </div>
+              </DropdownMenu.Item>
+            ))}
+            <DropdownMenu.Separator className="my-1 h-px bg-gray-200 dark:bg-gray-700" />
+            <DropdownMenu.Item
+              className="flex cursor-pointer select-none items-center gap-2 rounded px-3 py-2 outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
+              onSelect={() => navigate({ to: '/brand-guide' })}
+            >
+              Brand Guide & All Assets
             </DropdownMenu.Item>
-          ))}
-          <DropdownMenu.Separator className="my-1 h-px bg-gray-200 dark:bg-gray-700" />
-          <DropdownMenu.Item
-            className="flex cursor-pointer select-none items-center gap-2 rounded px-3 py-2 outline-none hover:bg-gray-100 dark:hover:bg-gray-700"
-            onSelect={() => navigate({ to: '/brand-guide' })}
-          >
-            Brand Guide & All Assets
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
       </DropdownMenu.Root>
     </div>
   )