AccountMenuSheet

The account menu on a phone: a sheet from the right, where a dropdown's items would be too small to hit. Following a link closes it, since the header outlives the navigation the link starts.

import { AccountMenuSheet } from "@evolve-storefront/layout/account-menu-sheet";

Preview

With Slot And LogoutOpen in Storybook ↗

Usage

<AccountMenuSheet
  items={menuItems}
  name={customer.givenName}
  renderLink={({ href, className, children }) => (
    <Link href={href} className={className}>{children}</Link>
  )}
  onLogout={() => logout.mutate()}
>
  <CompanySwitcher />
</AccountMenuSheet>;

Props

Prop	Type	Description
items	readonly AccountMenuSheetItem[]
permissions?	Iterable<string>	The permissions the business buyer holds. Items whose permissions or anyPermissions they lack are left out; omit to show every item.
groups?	readonly AccountMenuSheetGroup[]	The menu's groups, in order, as the account shell takes them. Items without a group come first; a group with no item the buyer may see is left out. Omit for a flat menu.
name?	string	The signed-in name, shown beside the trigger icon.
renderLink?	AccountMenuSheetLinkRenderer
onLogout?	(() => void)	Shows a log-out button at the end of the menu. Omit to show none.
children?	ReactNode	Above the links, such as a company switcher.
className?	string

Examples

Links OnlyWithout onLogout there is no log-out button, and without children no slot.

<AccountMenuSheet items={menuItems} />;

Open in Storybook ↗

By PermissionA business buyer sees only the items their permissions allow: the same rule as the account shell's menu, with the permissions the site already holds.

// The items carry the account shell's permissions; the sheet hides the rest.
<AccountMenuSheet items={menuItems} permissions={associate.permissions} renderLink={renderLink} />;

Open in Storybook ↗

Grouped For BusinessA business buyer's menu grouped by task, with the account shell's groups.

// The account shell's groups and items, so the phone menu matches the page's.
const groups = [{ key: "ordering" }, { key: "after-order" }, { key: "company" }, { key: "you" }];

<AccountMenuSheet items={menuItems} groups={groups} permissions={associate.permissions} renderLink={renderLink} />;

Open in Storybook ↗