@akinon/pz-theme 2.0.168-rc.0 → 2.0.169-rc.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @akinon/pz-theme
 
-## 2.0.168-rc.0
+## 2.0.169-rc.0
 
 ### Patch Changes
 
@@ -23,7 +23,7 @@
 - Updated dependencies [143be2b9d]
 - Updated dependencies [7889b08fe]
 - Updated dependencies [9f8cd3bc5]
-- Updated dependencies [d635d345]
+- Updated dependencies [d635d345e]
 - Updated dependencies [bfafa3f49]
 - Updated dependencies [d860c917]
 - Updated dependencies [ac6cada1c]
@@ -51,8 +51,16 @@
 - Updated dependencies [dca128112]
 - Updated dependencies [9a7b0937]
 - Updated dependencies [8853822c]
-  - @akinon/next@2.0.168-rc.0
-  - @akinon/theme-contract@2.0.168-rc.0
+  - @akinon/next@2.0.169-rc.0
+  - @akinon/theme-contract@2.0.169-rc.0
+
+## 2.0.168
+
+### Patch Changes
+
+- c5aaa9b3: ZERO-5475: Let the account menu block render a designer-edited item list with a selected rule per item, and scroll sideways when horizontal
+  - @akinon/next@2.0.168
+  - @akinon/theme-contract@2.0.168
 
 ## 2.0.167
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.168-rc.0",
+  "version": "2.0.169-rc.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.168-rc.0",
+    "@akinon/next": "2.0.169-rc.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.168-rc.0",
+    "@akinon/theme-contract": "2.0.169-rc.0",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.168-rc.0",
+    "@akinon/next": "2.0.169-rc.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/account-menu-items.test.tsx

@@ -0,0 +1,329 @@
+/**
+ * ZERO-5475: the account menu's items are a list the designer edits — added
+ * with +, removed with −, reordered — instead of five fixed keys.
+ *
+ * Every composition saved before the list existed has no `menuItems` and must
+ * render exactly as it did. Each entry can carry its own selected rule and
+ * further pages that keep it selected, and a horizontal menu can scroll
+ * sideways instead of wrapping.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+
+let mockPathname = '/account';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn(), replace: jest.fn() }),
+  usePathname: () => mockPathname,
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+// Turkish is the hidden default, English lives under /en.
+const TURKISH = {
+  locale: 'tr',
+  defaultLocaleValue: 'tr',
+  localeUrlStrategy: 'hide-default-locale'
+};
+let mockLocalization: Record<string, unknown> = { ...TURKISH };
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({ t: (path: string) => path, ...mockLocalization })
+}));
+
+jest.mock('@akinon/next/utils', () => ({
+  __esModule: true,
+  ...jest.requireActual('@akinon/next/utils'),
+  urlLocaleMatcherRegex: /^\/(en)(?=\/|$)/
+}));
+
+// jest maps every `@akinon/next/data/client/*` to one module, so this mock
+// stands in for `user` as well: the account menu needs its logout mutation.
+jest.mock('@akinon/next/data/client/misc', () => ({
+  useLogoutMutation: () => [jest.fn(), { isLoading: false }]
+}));
+
+import AccountMenuBlock from '../account-menu-block';
+
+const mkBlock = (properties: Record<string, unknown> = {}) =>
+  ({
+    id: 'account-menu-1',
+    type: 'account-menu',
+    label: 'account-menu',
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles: {},
+    blocks: []
+  } as never);
+
+const blockProps = {
+  placeholderId: 'account-menu',
+  sectionId: 'account-menu-main',
+  currentBreakpoint: 'desktop',
+  isDesigner: false
+};
+
+const renderMenu = (
+  properties: Record<string, unknown>,
+  overrides: Partial<typeof blockProps> = {}
+) =>
+  render(
+    <AccountMenuBlock
+      block={mkBlock(properties)}
+      {...blockProps}
+      {...overrides}
+    />
+  );
+
+const links = (root: ParentNode) =>
+  Array.from(root.querySelectorAll('a')).map((a) => ({
+    label: a.textContent,
+    href: a.getAttribute('href'),
+    key: a.getAttribute('data-account-menu-item')
+  }));
+
+const selectedLabels = (root: ParentNode) =>
+  Array.from(root.querySelectorAll('a[aria-current="page"]')).map(
+    (a) => a.textContent
+  );
+
+// Gant's tab strip, the menu this list was built for.
+const GANT_TABS = [
+  { id: 'dashboard', label: 'Hesabım', href: '/account', match: 'exact' },
+  {
+    id: 'orders',
+    label: 'Siparişlerim',
+    href: '/users/orders',
+    match: 'startsWith',
+    activePaths: '/account/orders'
+  },
+  {
+    id: 'favourites',
+    label: 'Favorilerim',
+    href: '/account/favourite-products/',
+    match: 'startsWith'
+  },
+  { id: 'loyalty', label: 'MyGANT', href: '/account/loyalty' },
+  {
+    id: 'personal',
+    label: 'Kişisel Bilgiler',
+    href: '/account/profile',
+    activePaths:
+      '/account/address, /account/change-email,\n/account/change-password'
+  },
+  { id: 'coupons', label: 'Kuponlarım', href: '/account/coupons' }
+];
+
+beforeEach(() => {
+  mockLocalization = { ...TURKISH };
+  mockPathname = '/account';
+});
+
+describe('account menu without an item list', () => {
+  it('renders the five fixed entries a published composition has always had', () => {
+    const { container } = renderMenu({});
+
+    expect(links(container)).toEqual([
+      { label: 'Orders', href: '/account/orders', key: 'orders' },
+      { label: 'Addresses', href: '/account/address', key: 'addresses' },
+      { label: 'Profile', href: '/account/profile', key: 'profile' },
+      {
+        label: 'Favourites',
+        href: '/account/favourite-products',
+        key: 'favourites'
+      },
+      { label: 'Coupons', href: '/account/coupons', key: 'coupons' }
+    ]);
+  });
+
+  it('still follows itemOrder and the per-key labels and links', () => {
+    const { container } = renderMenu({
+      itemOrder: 'coupons, orders',
+      ordersLabel: 'Siparişlerim',
+      ordersHref: '/users/orders'
+    });
+
+    expect(links(container)).toEqual([
+      { label: 'Coupons', href: '/account/coupons', key: 'coupons' },
+      { label: 'Siparişlerim', href: '/users/orders', key: 'orders' }
+    ]);
+  });
+
+  // A drop in the editor seeds `{desktop: undefined}` for a property without
+  // a default; the panel shows the five fixed entries for it, so must the page.
+  it.each([
+    ['the bucket a drop seeds', { desktop: undefined }],
+    ['that bucket once saved', {}],
+    ['a blank value', '']
+  ])('keeps the fixed entries for %s', (_case, menuItems) => {
+    const { container } = renderMenu({ menuItems });
+
+    expect(links(container).map((link) => link.key)).toEqual([
+      'orders',
+      'addresses',
+      'profile',
+      'favourites',
+      'coupons'
+    ]);
+  });
+});
+
+describe('account menu with an item list', () => {
+  it('renders the listed entries in their order, ignoring the fixed keys', () => {
+    const { container } = renderMenu({
+      itemOrder: 'orders,addresses',
+      menuItems: GANT_TABS
+    });
+
+    expect(
+      links(container).map(({ label, href, key }) => [label, href, key])
+    ).toEqual([
+      ['Hesabım', '/account', 'dashboard'],
+      ['Siparişlerim', '/users/orders', 'orders'],
+      ['Favorilerim', '/account/favourite-products/', 'favourites'],
+      ['MyGANT', '/account/loyalty', 'loyalty'],
+      ['Kişisel Bilgiler', '/account/profile', 'personal'],
+      ['Kuponlarım', '/account/coupons', 'coupons']
+    ]);
+  });
+
+  it('skips an entry that has no label or no link yet', () => {
+    const { container } = renderMenu({
+      menuItems: [
+        { id: 'a', label: 'Hesabım', href: '/account' },
+        { id: 'b', label: '', href: '/account/orders' },
+        { id: 'c', label: 'Kuponlarım', href: '  ' },
+        null
+      ]
+    });
+
+    expect(links(container).map((link) => link.label)).toEqual(['Hesabım']);
+  });
+
+  it('shows no entry once every one was removed', () => {
+    const { container } = renderMenu({ menuItems: [], showLogout: true });
+
+    expect(links(container)).toEqual([]);
+    expect(
+      container.querySelector('[data-account-menu-item="logout"]')
+    ).not.toBeNull();
+  });
+
+  it('leaves the storefront empty when the list and logout are both off', () => {
+    const { container } = renderMenu({ menuItems: [], showLogout: false });
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('tells apart two entries that share an id', () => {
+    const { container } = renderMenu({
+      menuItems: [
+        { id: 'tab', label: 'One', href: '/account/one' },
+        { id: 'tab', label: 'Two', href: '/account/two' }
+      ]
+    });
+
+    expect(links(container).map((link) => link.key)).toEqual(['tab', 'tab-2']);
+  });
+
+  it('reads a list authored per breakpoint', () => {
+    const { container } = renderMenu(
+      {
+        menuItems: {
+          desktop: GANT_TABS,
+          mobile: GANT_TABS.slice(0, 2)
+        }
+      },
+      { currentBreakpoint: 'mobile' }
+    );
+
+    expect(links(container).map((link) => link.label)).toEqual([
+      'Hesabım',
+      'Siparişlerim'
+    ]);
+  });
+});
+
+describe('selected entry', () => {
+  it.each([
+    ['/account', ['Hesabım']],
+    ['/users/orders', ['Siparişlerim']],
+    ['/account/orders/1234', ['Siparişlerim']],
+    ['/account/favourite-products', ['Favorilerim']],
+    ['/account/profile', ['Kişisel Bilgiler']],
+    ['/account/change-password', ['Kişisel Bilgiler']],
+    ['/account/change-email', ['Kişisel Bilgiler']],
+    ['/account/address', ['Kişisel Bilgiler']],
+    ['/account/coupons', ['Kuponlarım']]
+  ])('on %s it is %j', (pathname, expected) => {
+    mockPathname = pathname;
+    const { container } = renderMenu({ menuItems: GANT_TABS });
+
+    expect(selectedLabels(container)).toEqual(expected);
+  });
+
+  it('lets an entry without its own rule inherit the block setting', () => {
+    mockPathname = '/account/loyalty/history';
+
+    const exact = renderMenu({ menuItems: GANT_TABS });
+    expect(selectedLabels(exact.container)).toEqual([]);
+    exact.unmount();
+
+    const section = renderMenu({
+      menuItems: GANT_TABS,
+      activeMatch: 'startsWith'
+    });
+    // Hesabım says "only this page" itself, so the section rule leaves it out.
+    expect(selectedLabels(section.container)).toEqual(['MyGANT']);
+  });
+
+  it('matches the further pages in the localized form the links render', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    mockPathname = '/en/account/address';
+    const { container } = renderMenu({ menuItems: GANT_TABS });
+
+    expect(selectedLabels(container)).toEqual(['Kişisel Bilgiler']);
+  });
+});
+
+describe('horizontal overflow', () => {
+  const nav = (root: ParentNode) =>
+    root.querySelector('[data-account-menu]') as HTMLElement;
+
+  it('wraps by default, as a horizontal menu always has', () => {
+    const { container } = renderMenu({ orientation: 'horizontal' });
+
+    expect(nav(container).style.flexWrap).toBe('wrap');
+    expect(
+      nav(container).getAttribute('data-account-menu-overflow')
+    ).toBeNull();
+  });
+
+  it('stays on one line and scrolls sideways when set to scroll', () => {
+    const { container } = renderMenu({
+      orientation: 'horizontal',
+      overflow: 'scroll',
+      menuItems: GANT_TABS
+    });
+    const menu = nav(container);
+
+    expect(menu.getAttribute('data-account-menu-overflow')).toBe('scroll');
+    expect(menu.style.flexWrap).toBe('nowrap');
+    expect(menu.style.overflowX).toBe('auto');
+    expect(menu.style.whiteSpace).toBe('nowrap');
+    expect((container.querySelector('a') as HTMLElement).style.flexShrink).toBe(
+      '0'
+    );
+  });
+
+  it('ignores the setting on a vertical menu', () => {
+    const { container } = renderMenu({ overflow: 'scroll' });
+    const menu = nav(container);
+
+    expect(menu.style.flexDirection).toBe('column');
+    expect(menu.style.overflowX).toBe('');
+    expect(menu.getAttribute('data-account-menu-overflow')).toBeNull();
+  });
+});

package/src/blocks/account-menu-block.tsx

@@ -9,6 +9,7 @@ import { useLogoutMutation } from '@akinon/next/data/client/user';
 import { emitCommerceEvent } from '../utils/analytics';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readResponsiveArray } from './responsive-array';
 import { BlockRendererProps } from './block-renderer-registry';
 
 /**
@@ -23,6 +24,56 @@ const DEFAULT_ITEM_ORDER = [
   'coupons'
 ];
 
+type ActiveMatch = 'exact' | 'startsWith';
+
+/**
+ * One entry of the editor's item list (`menuItems`).
+ *
+ * `match` overrides the block-wide Active Item Match for this entry, and a
+ * blank one inherits it. `activePaths` names further pages that keep the entry
+ * selected — a "Personal details" tab that stays selected on the address and
+ * password pages — and each of them is matched with the entry's own rule.
+ */
+interface AccountMenuListEntry {
+  id?: unknown;
+  label?: unknown;
+  href?: unknown;
+  match?: unknown;
+  activePaths?: unknown;
+}
+
+interface ResolvedMenuItem {
+  key: string;
+  href: string;
+  label: string;
+  match: ActiveMatch;
+  activePaths: string[];
+}
+
+const toActiveMatch = (value: unknown, fallback: ActiveMatch): ActiveMatch =>
+  value === 'exact' || value === 'startsWith' ? value : fallback;
+
+const toText = (value: unknown) =>
+  typeof value === 'string' || typeof value === 'number'
+    ? String(value).trim()
+    : '';
+
+// Commas, spaces and line breaks all separate paths: a path never contains
+// one, and the editor field is free text.
+const toPathList = (value: unknown) =>
+  typeof value === 'string'
+    ? value
+        .split(/[\s,]+/)
+        .map((path) => path.trim())
+        .filter(Boolean)
+    : [];
+
+// `/account/orders/` and `/account/orders` are the same page; whether the
+// pathname carries the slash depends on the brand's trailingSlash setting,
+// and the configured href is typed by hand.
+const trimTrailingSlash = (path: string) =>
+  path.length > 1 ? path.replace(/\/+$/, '') : path;
+
 /**
  * Functional account block: account area navigation.
  *
@@ -30,9 +81,14 @@ const DEFAULT_ITEM_ORDER = [
  * import the brand alias, so every target is an editor property. The
  * defaults are the conventional '/account/...' paths — brands whose ROUTES
  * differ (superstep uses '/users/orders' for orders) override them here.
- * Properties: showLogout, itemOrder, orientation, activeMatch, emptyLabel,
- * ordersHref, addressesHref, profileHref, favouritesHref, couponsHref,
- * logoutLabel and the matching *Label keys.
+ *
+ * Items come from `menuItems` — the list the designer adds to with + and
+ * removes from with − — whenever the block has one. Every composition saved
+ * before that list existed has none and keeps rendering from the five fixed
+ * keys: itemOrder, ordersHref, addressesHref, profileHref, favouritesHref,
+ * couponsHref and the matching *Label keys.
+ * Other properties: showLogout, orientation, overflow, activeMatch,
+ * emptyLabel, logoutLabel, logoutRedirect.
  * Parts: menu, item (selected), logout, empty.
  */
 const AccountMenuBlock = ({
@@ -63,74 +119,124 @@ const AccountMenuBlock = ({
   const showLogout = boolProp('showLogout', true);
   const orientation =
     prop('orientation', 'vertical') === 'horizontal' ? 'horizontal' : 'vertical';
-  const activeMatch =
-    prop('activeMatch', 'exact') === 'startsWith' ? 'startsWith' : 'exact';
+  // A horizontal menu that does not fit either wraps onto a new line (what it
+  // has always done) or stays on one line and scrolls sideways — the tab strip
+  // most brands put above the account pages on a phone.
+  const scrollsSideways =
+    orientation === 'horizontal' && prop('overflow', 'wrap') === 'scroll';
+  const activeMatch = toActiveMatch(prop('activeMatch', 'exact'), 'exact');
   const emptyLabel = prop('emptyLabel', '');
 
   const pathname = usePathname();
   const localize = useLocalizeHref();
   const [logout, { isLoading: isLoggingOut }] = useLogoutMutation();
 
-  const definitions: Record<
-    string,
-    { key: string; href: string; label: string }
-  > = {
-    orders: {
-      key: 'orders',
-      href: prop('ordersHref', '/account/orders'),
-      label: prop('ordersLabel', 'Orders')
-    },
-    addresses: {
-      key: 'addresses',
-      href: prop('addressesHref', '/account/address'),
-      label: prop('addressesLabel', 'Addresses')
-    },
-    profile: {
-      key: 'profile',
-      href: prop('profileHref', '/account/profile'),
-      label: prop('profileLabel', 'Profile')
-    },
-    favourites: {
-      key: 'favourites',
-      href: prop('favouritesHref', '/account/favourite-products'),
-      label: prop('favouritesLabel', 'Favourites')
-    },
-    coupons: {
-      key: 'coupons',
-      href: prop('couponsHref', '/account/coupons'),
-      label: prop('couponsLabel', 'Coupons')
-    }
+  const legacyItems = (): ResolvedMenuItem[] => {
+    const definitions: Record<string, { href: string; label: string }> = {
+      orders: {
+        href: prop('ordersHref', '/account/orders'),
+        label: prop('ordersLabel', 'Orders')
+      },
+      addresses: {
+        href: prop('addressesHref', '/account/address'),
+        label: prop('addressesLabel', 'Addresses')
+      },
+      profile: {
+        href: prop('profileHref', '/account/profile'),
+        label: prop('profileLabel', 'Profile')
+      },
+      favourites: {
+        href: prop('favouritesHref', '/account/favourite-products'),
+        label: prop('favouritesLabel', 'Favourites')
+      },
+      coupons: {
+        href: prop('couponsHref', '/account/coupons'),
+        label: prop('couponsLabel', 'Coupons')
+      }
+    };
+
+    const requestedOrder = prop('itemOrder', DEFAULT_ITEM_ORDER.join(','))
+      .split(',')
+      .map((key) => key.trim())
+      .filter(Boolean);
+    // A repeated key would render the same route twice and collide on the
+    // React key, so the list is de-duplicated before it is resolved.
+    const resolvedOrder = Array.from(
+      new Set(requestedOrder.length > 0 ? requestedOrder : DEFAULT_ITEM_ORDER)
+    );
+
+    return resolvedOrder
+      .filter((key) => Boolean(definitions[key]))
+      .map((key) => ({
+        key,
+        href: definitions[key].href,
+        label: definitions[key].label,
+        match: activeMatch,
+        activePaths: []
+      }))
+      .filter((item) => Boolean(item.href) && Boolean(item.label));
   };
 
-  const requestedOrder = prop('itemOrder', DEFAULT_ITEM_ORDER.join(','))
-    .split(',')
-    .map((key) => key.trim())
-    .filter(Boolean);
-  // A repeated key would render the same route twice and collide on the React
-  // key, so the list is de-duplicated before it is resolved.
-  const resolvedOrder = Array.from(
-    new Set(requestedOrder.length > 0 ? requestedOrder : DEFAULT_ITEM_ORDER)
-  );
+  const listItems = (rawList: unknown): ResolvedMenuItem[] => {
+    const seenKeys = new Set<string>();
+
+    return readResponsiveArray<AccountMenuListEntry | null>(
+      rawList,
+      currentBreakpoint
+    )
+      .map((entry, index) => {
+        const id = toText(entry?.id) || `item-${index + 1}`;
+        // Two entries sharing an id (one duplicated by hand in the JSON) would
+        // collide on the React key, so the second one is told apart.
+        const key = seenKeys.has(id) ? `${id}-${index + 1}` : id;
+        seenKeys.add(key);
 
-  const items = resolvedOrder
-    .map((key) => definitions[key])
-    .filter((item) => Boolean(item?.href) && Boolean(item?.label));
+        return {
+          key,
+          href: toText(entry?.href),
+          label: toText(entry?.label),
+          match: toActiveMatch(entry?.match, activeMatch),
+          activePaths: toPathList(entry?.activePaths)
+        };
+      })
+      .filter((item) => Boolean(item.href) && Boolean(item.label));
+  };
+
+  // A list is any array, flat or per breakpoint. An emptied list is still a
+  // list: the designer removed every entry, so the menu shows none. An object
+  // holding no array is not a list: a block dropped in the editor can carry
+  // `{desktop: undefined}` (`{}` once saved), and it must keep the five fixed
+  // entries the editor's panel shows for it, not render an empty menu.
+  const rawMenuItems = block.properties?.menuItems;
+  const hasItemList =
+    Array.isArray(rawMenuItems) ||
+    (rawMenuItems !== null &&
+      typeof rawMenuItems === 'object' &&
+      Object.values(rawMenuItems).some(Array.isArray));
+
+  const items = hasItemList ? listItems(rawMenuItems) : legacyItems();
 
   // The pathname carries the locale (`/en/account/orders`) and the configured
   // hrefs do not, so each item is matched in the localized form its link renders.
-  const isActive = (href: string) => {
+  const matchesPage = (href: string, match: ActiveMatch) => {
     if (!pathname || !href) return false;
-    const target = localize(href);
-    if (activeMatch === 'startsWith') {
+    const current = trimTrailingSlash(pathname);
+    const target = trimTrailingSlash(localize(href));
+    if (match === 'startsWith') {
       return (
-        pathname === target ||
-        pathname.startsWith(`${target.replace(/\/$/, '')}/`)
+        current === target ||
+        current.startsWith(`${target.replace(/\/$/, '')}/`)
       );
     }
 
-    return pathname === target;
+    return current === target;
   };
 
+  const isActive = (item: ResolvedMenuItem) =>
+    [item.href, ...item.activePaths].some((href) =>
+      matchesPage(href, item.match)
+    );
+
   const handleLogout = async () => {
     if (isDesigner) return;
 
@@ -189,7 +295,10 @@ const AccountMenuBlock = ({
     padding: '8px 0',
     color: 'inherit',
     textDecoration: 'none',
-    fontWeight: active ? 600 : 400
+    fontWeight: active ? 600 : 400,
+    // On a scrolling strip an entry keeps its full width instead of being
+    // squeezed until its label breaks.
+    ...(scrollsSideways ? { flexShrink: 0 } : null)
   });
 
   // Both spellings of each field are published so a designer can bind either
@@ -201,7 +310,7 @@ const AccountMenuBlock = ({
     label: item.label,
     href: item.href,
     url: item.href,
-    active: isActive(item.href)
+    active: isActive(item)
   }));
 
   // A designer who marked a child as the row layout gets that layout repeated
@@ -219,21 +328,34 @@ const AccountMenuBlock = ({
     />
   ) : null;
 
+  const horizontalLayout: React.CSSProperties = scrollsSideways
+    ? {
+        flexWrap: 'nowrap',
+        overflowX: 'auto',
+        // `nowrap` is inherited by row layouts too, so a templated row is as
+        // wide as its content and the strip scrolls instead of squeezing it.
+        whiteSpace: 'nowrap',
+        scrollbarWidth: 'none',
+        WebkitOverflowScrolling: 'touch'
+      }
+    : { flexWrap: 'wrap' };
+
   return (
     <nav
       data-account-menu=""
       data-account-menu-orientation={orientation}
+      data-account-menu-overflow={scrollsSideways ? 'scroll' : undefined}
       {...partAttrs('menu')}
       style={{
         display: 'flex',
         flexDirection: orientation === 'horizontal' ? 'row' : 'column',
-        ...(orientation === 'horizontal' ? { flexWrap: 'wrap' } : null),
+        ...(orientation === 'horizontal' ? horizontalLayout : null),
         gap: 'var(--account-menu-gap, 4px)'
       }}
     >
       {customItems ??
         items.map((item) => {
-          const active = isActive(item.href);
+          const active = isActive(item);
 
           return (
             <NextLink