feat: improve logo support and navigation on mobile menu

hunterbecton · hunterbecton · commit 62c67ea62f6c · 2025-06-10T12:01:15.000-04:00
diff --git a/core/components/header/index.tsx b/core/components/header/index.tsx
@@ -77,31 +77,21 @@ export const Header = async () => {
 
   const logo = data.settings ? logoTransformer(data.settings) : '';
 
-  // const locales = routing.locales.map((enabledLocales) => ({
-  //   id: enabledLocales,
-  //   label: enabledLocales.toLocaleUpperCase(),
-  // }));
-
-  const locales = [
-    { id: 'en', label: 'EN' },
-    { id: 'es', label: 'ES' },
-  ];
-
-  // const currencies = data.currencies.edges
-  //   ? data.currencies.edges
-  //       // only show transactional currencies for now until cart prices can be rendered in display currencies
-  //       .filter(({ node }) => node.isTransactional)
-  //       .map(({ node }) => ({
-  //         id: node.code,
-  //         label: node.code,
-  //         isDefault: node.isDefault,
-  //       }))
-  //   : [];
-
-  const currencies = [
-    { id: 'USD', label: 'USD', isDefault: true },
-    { id: 'EUR', label: 'EUR', isDefault: false },
-  ];
+  const locales = routing.locales.map((enabledLocales) => ({
+    id: enabledLocales,
+    label: enabledLocales.toLocaleUpperCase(),
+  }));
+
+  const currencies = data.currencies.edges
+    ? data.currencies.edges
+        // only show transactional currencies for now until cart prices can be rendered in display currencies
+        .filter(({ node }) => node.isTransactional)
+        .map(({ node }) => ({
+          id: node.code,
+          label: node.code,
+          isDefault: node.isDefault,
+        }))
+    : [];
 
   const streamableLinks = Streamable.from(async () => {
     const customerAccessToken = await getSessionCustomerAccessToken();
diff --git a/core/vibes/soul/primitives/logo/index.tsx b/core/vibes/soul/primitives/logo/index.tsx
@@ -36,19 +36,19 @@ export function Logo({ className, logo: streamableLogo, href, width, height, lab
         <Link
           aria-label={label}
           className={clsx(
-            'relative outline-0 ring-[var(--logo-focus,hsl(var(--primary)))] ring-offset-4 focus-visible:ring-2',
+            'relative inline-block outline-0 ring-[var(--logo-focus,hsl(var(--primary)))] ring-offset-4 focus-visible:ring-2',
             className,
           )}
           href={href}
-          style={typeof logo === 'string' ? {} : { width, height }}
+          style={typeof logo === 'string' ? {} : { maxWidth: `${width}px`, height: `${height}px` }}
         >
           {typeof logo === 'object' && logo !== null && logo.src !== '' ? (
             <Image
               alt={logo.alt}
-              className="object-contain object-left"
-              fill
-              sizes={`${width}px`}
+              className="h-auto w-full object-contain object-left"
+              height={height}
               src={logo.src}
+              width={width}
             />
           ) : (
             typeof logo === 'string' && (
diff --git a/core/vibes/soul/primitives/navigation/index.tsx b/core/vibes/soul/primitives/navigation/index.tsx
@@ -385,14 +385,35 @@ export const Navigation = forwardRef(function Navigation<S extends SearchResult>
                     ))
                   }
                 </Stream>
-                {/* Locale / Language Dropdown */}
-                {locales && locales.length > 1 ? (
-                  <LocaleSwitcher
-                    activeLocaleId={activeLocaleId}
-                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                    locales={locales as [Locale, Locale, ...Locale[]]}
-                  />
-                ) : null}
+                <div className="p-2 @4xl:p-5">
+                  <div className="flex items-center px-3 py-1 @4xl:py-2">
+                    {/* Locale / Language Dropdown */}
+                    {locales && locales.length > 1 ? (
+                      <LocaleSwitcher
+                        activeLocaleId={activeLocaleId}
+                        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                        locales={locales as [Locale, Locale, ...Locale[]]}
+                      />
+                    ) : null}
+
+                    {/* Currency Dropdown */}
+                    <Stream
+                      fallback={null}
+                      value={Streamable.all([streamableCurrencies, streamableActiveCurrencyId])}
+                    >
+                      {([currencies, activeCurrencyId]) =>
+                        currencies && currencies.length > 1 && currencyAction ? (
+                          <CurrencyForm
+                            action={currencyAction}
+                            activeCurrencyId={activeCurrencyId}
+                            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                            currencies={currencies as [Currency, ...Currency[]]}
+                          />
+                        ) : null
+                      }
+                    </Stream>
+                  </div>
+                </div>
               </div>
             </Popover.Content>
           </Popover.Portal>
@@ -573,6 +594,7 @@ export const Navigation = forwardRef(function Navigation<S extends SearchResult>
           {locales && locales.length > 1 ? (
             <LocaleSwitcher
               activeLocaleId={activeLocaleId}
+              className="hidden @4xl:block"
               // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
               locales={locales as [Locale, Locale, ...Locale[]]}
             />
@@ -588,6 +610,7 @@ export const Navigation = forwardRef(function Navigation<S extends SearchResult>
                 <CurrencyForm
                   action={currencyAction}
                   activeCurrencyId={activeCurrencyId}
+                  className="hidden @4xl:block"
                   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                   currencies={currencies as [Currency, ...Currency[]]}
                 />
@@ -855,61 +878,67 @@ const useSwitchLocale = () => {
 function LocaleSwitcher({
   locales,
   activeLocaleId,
+  className,
 }: {
   activeLocaleId?: string;
   locales: [Locale, ...Locale[]];
+  className?: string;
 }) {
   const activeLocale = locales.find((locale) => locale.id === activeLocaleId);
   const [isPending, startTransition] = useTransition();
   const switchLocale = useSwitchLocale();
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        className={clsx(
-          'flex items-center gap-1 text-xs uppercase transition-opacity disabled:opacity-30',
-          navButtonClassName,
-        )}
-        disabled={isPending}
-      >
-        {activeLocale?.id ?? locales[0].id}
-        <ChevronDown size={16} strokeWidth={1.5} />
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align="end"
-          className="z-50 max-h-80 overflow-y-scroll rounded-xl bg-[var(--nav-locale-background,hsl(var(--background)))] p-2 shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 @4xl:w-32 @4xl:rounded-2xl @4xl:p-2"
-          sideOffset={16}
+    <div className={className}>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger
+          className={clsx(
+            'flex items-center gap-1 text-xs uppercase transition-opacity disabled:opacity-30',
+            navButtonClassName,
+          )}
+          disabled={isPending}
         >
-          {locales.map(({ id, label }) => (
-            <DropdownMenu.Item
-              className={clsx(
-                'cursor-default rounded-lg bg-[var(--nav-locale-link-background,transparent)] px-2.5 py-2 font-[family-name:var(--nav-locale-link-font-family,var(--font-family-body))] text-sm font-medium text-[var(--nav-locale-link-text,hsl(var(--contrast-400)))] outline-none ring-[var(--nav-focus,hsl(var(--primary)))] transition-colors hover:bg-[var(--nav-locale-link-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-locale-link-text-hover,hsl(var(--foreground)))]',
-                {
-                  'text-[var(--nav-locale-link-text-selected,hsl(var(--foreground)))]':
-                    id === activeLocaleId,
-                },
-              )}
-              key={id}
-              onSelect={() => startTransition(() => switchLocale(id))}
-            >
-              {label}
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+          {activeLocale?.id ?? locales[0].id}
+          <ChevronDown size={16} strokeWidth={1.5} />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            align="end"
+            className="z-50 max-h-80 overflow-y-scroll rounded-xl bg-[var(--nav-locale-background,hsl(var(--background)))] p-2 shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 @4xl:w-32 @4xl:rounded-2xl @4xl:p-2"
+            sideOffset={16}
+          >
+            {locales.map(({ id, label }) => (
+              <DropdownMenu.Item
+                className={clsx(
+                  'cursor-default rounded-lg bg-[var(--nav-locale-link-background,transparent)] px-2.5 py-2 font-[family-name:var(--nav-locale-link-font-family,var(--font-family-body))] text-sm font-medium text-[var(--nav-locale-link-text,hsl(var(--contrast-400)))] outline-none ring-[var(--nav-focus,hsl(var(--primary)))] transition-colors hover:bg-[var(--nav-locale-link-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-locale-link-text-hover,hsl(var(--foreground)))]',
+                  {
+                    'text-[var(--nav-locale-link-text-selected,hsl(var(--foreground)))]':
+                      id === activeLocaleId,
+                  },
+                )}
+                key={id}
+                onSelect={() => startTransition(() => switchLocale(id))}
+              >
+                {label}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </div>
   );
 }
 
 function CurrencyForm({
   action,
   currencies,
   activeCurrencyId,
+  className,
 }: {
   activeCurrencyId?: string;
   action: CurrencyAction;
   currencies: [Currency, ...Currency[]];
+  className?: string;
 }) {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
@@ -922,52 +951,54 @@ function CurrencyForm({
   }, [lastResult?.error]);
 
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger
-        className={clsx(
-          'flex items-center gap-1 text-xs uppercase transition-opacity disabled:opacity-30',
-          navButtonClassName,
-        )}
-        disabled={isPending}
-      >
-        {activeCurrency?.label ?? currencies[0].label}
-        <ChevronDown size={16} strokeWidth={1.5} />
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align="end"
-          className="z-50 max-h-80 overflow-y-scroll rounded-xl bg-[var(--nav-locale-background,hsl(var(--background)))] p-2 shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 @4xl:w-32 @4xl:rounded-2xl @4xl:p-2"
-          sideOffset={16}
+    <div className={className}>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger
+          className={clsx(
+            'flex items-center gap-1 text-xs uppercase transition-opacity disabled:opacity-30',
+            navButtonClassName,
+          )}
+          disabled={isPending}
         >
-          {currencies.map((currency) => (
-            <DropdownMenu.Item
-              className={clsx(
-                'cursor-default rounded-lg bg-[var(--nav-locale-link-background,transparent)] px-2.5 py-2 font-[family-name:var(--nav-locale-link-font-family,var(--font-family-body))] text-sm font-medium text-[var(--nav-locale-link-text,hsl(var(--contrast-400)))] outline-none ring-[var(--nav-focus,hsl(var(--primary)))] transition-colors hover:bg-[var(--nav-locale-link-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-locale-link-text-hover,hsl(var(--foreground)))]',
-                {
-                  'text-[var(--nav-locale-link-text-selected,hsl(var(--foreground)))]':
-                    currency.id === activeCurrencyId,
-                },
-              )}
-              key={currency.id}
-              onSelect={() => {
-                // eslint-disable-next-line @typescript-eslint/require-await
-                startTransition(async () => {
-                  const formData = new FormData();
-
-                  formData.append('id', currency.id);
-                  formAction(formData);
-
-                  // This is needed to refresh the Data Cache after the product has been added to the cart.
-                  // The cart id is not picked up after the first time the cart is created/updated.
-                  router.refresh();
-                });
-              }}
-            >
-              {currency.label}
-            </DropdownMenu.Item>
-          ))}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+          {activeCurrency?.label ?? currencies[0].label}
+          <ChevronDown size={16} strokeWidth={1.5} />
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Portal>
+          <DropdownMenu.Content
+            align="end"
+            className="z-50 max-h-80 overflow-y-scroll rounded-xl bg-[var(--nav-locale-background,hsl(var(--background)))] p-2 shadow-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 @4xl:w-32 @4xl:rounded-2xl @4xl:p-2"
+            sideOffset={16}
+          >
+            {currencies.map((currency) => (
+              <DropdownMenu.Item
+                className={clsx(
+                  'cursor-default rounded-lg bg-[var(--nav-locale-link-background,transparent)] px-2.5 py-2 font-[family-name:var(--nav-locale-link-font-family,var(--font-family-body))] text-sm font-medium text-[var(--nav-locale-link-text,hsl(var(--contrast-400)))] outline-none ring-[var(--nav-focus,hsl(var(--primary)))] transition-colors hover:bg-[var(--nav-locale-link-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-locale-link-text-hover,hsl(var(--foreground)))]',
+                  {
+                    'text-[var(--nav-locale-link-text-selected,hsl(var(--foreground)))]':
+                      currency.id === activeCurrencyId,
+                  },
+                )}
+                key={currency.id}
+                onSelect={() => {
+                  // eslint-disable-next-line @typescript-eslint/require-await
+                  startTransition(async () => {
+                    const formData = new FormData();
+
+                    formData.append('id', currency.id);
+                    formAction(formData);
+
+                    // This is needed to refresh the Data Cache after the product has been added to the cart.
+                    // The cart id is not picked up after the first time the cart is created/updated.
+                    router.refresh();
+                  });
+                }}
+              >
+                {currency.label}
+              </DropdownMenu.Item>
+            ))}
+          </DropdownMenu.Content>
+        </DropdownMenu.Portal>
+      </DropdownMenu.Root>
+    </div>
   );
 }
