Skip to content

Hunter/catalyst 1028 improve spacing for header #2398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 16, 2025
Merged

Hunter/catalyst 1028 improve spacing for header #2398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions core/vibes/soul/primitives/logo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' && (
Expand Down
206 changes: 124 additions & 82 deletions core/vibes/soul/primitives/navigation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,6 +387,38 @@ export const Navigation = forwardRef(function Navigation<S extends SearchResult>
))
}
</Stream>
{/* Mobile Locale / Currency Dropdown */}
{locales && locales.length > 1 && streamableCurrencies && (
<div className="p-2 @4xl:p-5">
<div className="flex items-center px-3 py-1 @4xl:py-2">
{/* Locale / Language Dropdown */}
{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.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>
Expand Down Expand Up @@ -567,6 +599,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[]]}
/>
Expand All @@ -582,6 +615,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[]]}
switchCurrencyLabel={switchCurrencyLabel}
Expand Down Expand Up @@ -850,50 +884,54 @@ 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>
);
}

Expand All @@ -902,11 +940,13 @@ function CurrencyForm({
currencies,
activeCurrencyId,
switchCurrencyLabel = 'Switch currency',
className,
}: {
activeCurrencyId?: string;
action: CurrencyAction;
currencies: [Currency, ...Currency[]];
switchCurrencyLabel?: string;
className?: string;
}) {
const router = useRouter();
const [isPending, startTransition] = useTransition();
Expand All @@ -919,54 +959,56 @@ 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}>
<title>{switchCurrencyLabel}</title>
</ChevronDown>
</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}>
<title>{switchCurrencyLabel}</title>
</ChevronDown>
</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>
);
}