Profile Menu

ProfileMenu — складений компонент для header, sidebar або account area. Він поєднує Avatar із кнопкою-тригером і, за наявності entries, відкриває меню акаунта через ButtonMenu. Компонент не керує маршрутизацією, авторизацією чи виконанням дій — ці дії передає батьківський застосунок.

Повний режим із менюCopy Anchor Link

import { ProfileMenu } from '@mosmox/ui';

const entries = [
  { key: 'profile', label: 'View profile' },
  { key: 'settings', label: 'Account settings' },
  { type: 'divider' },
  { key: 'sign-out', label: 'Sign out', danger: true },
];

<ProfileMenu
  name="Alex Johnson"
  secondaryText="[email protected]"
  avatarProps={{ image: '/avatars/alex.jpg', name: 'Alex Johnson' }}
  entries={entries}
  onOpenChange={(open) => console.log('Menu open:', open)}
/>

Коли entries містить хоча б один елемент, компонент використовує ButtonMenu: натискання на тригер відкриває меню, а стрілка додається автоматично. Якщо entries не передані або масив порожній, компонент рендерить звичайну кнопку без меню та стрілки.

На всю ширину батьківського блокаCopy Anchor Link

fullWidth розтягує тригер ProfileMenu на всю доступну ширину батьківського елемента. Це працює і для режиму з меню, і для звичайної кнопки без entries. У цьому режимі аватар і текст залишаються зліва, а стрілка меню вирівнюється по правому краю, залишаючи між ними вільний простір.

<ProfileMenu
  fullWidth
  name="Alex Johnson"
  secondaryText="[email protected]"
  avatarProps={{ initials: 'AJ' }}
  entries={entries}
/>

Режими відображенняCopy Anchor Link

display визначає, яку частину профільної інформації показувати:

• full — аватар, ім’я та secondaryText;
• compact — аватар та ім’я;
• avatar — тільки аватар, без тексту.

<ProfileMenu
  name="Alex Johnson"
  secondaryText="[email protected]"
  display="full"
  avatarProps={{ initials: 'AJ' }}
  entries={entries}
/>

<ProfileMenu name="Alex Johnson" display="compact" avatarProps={{ initials: 'AJ' }} />
<ProfileMenu name="Alex Johnson" display="avatar" avatarProps={{ initials: 'AJ' }} />

Аватар і fallback-ініціалиCopy Anchor Link

avatarProps передає параметри до Avatar, крім size, який визначається самим ProfileMenu відповідно до його size. Можна передати зображення, ініціали, ім’я, варіант оформлення, статус та інші підтримувані властивості Avatar.

Якщо image не заданий, компонент використовує avatarProps.initials. Якщо ініціали також не задані, для текстового name автоматично створюються ініціали з імені: Alex Johnson → AJ. Для повністю власного вмісту використовуйте avatar.

<ProfileMenu
  name="Alex Johnson"
  avatarProps={{ initials: 'AJ', variant: 'solid', status: 'online' }}
/>

<ProfileMenu
  name="Alex Johnson"
  avatar={<span aria-hidden="true">👤</span>}
  display="avatar"
/>

Прозорий тригерCopy Anchor Link

За замовчуванням тригер має фон варіанта light. Щоб прибрати фон, рамку та тінь, використовуйте showBackground={false}. Значення за замовчуванням — true.

<ProfileMenu
  name="Alex Johnson"
  secondaryText="[email protected]"
  avatarProps={{ initials: 'AJ' }}
  entries={entries}
  showBackground={false}
/>

РозміриCopy Anchor Link

size підтримує три значення:

• xs — компактний тригер і малий аватар;
• sm — малий тригер;
• default — стандартний розмір.

Розмір аватара автоматично узгоджується з розміром тригера. Власне значення avatarProps.size ігнорується, щоб зберігати узгодженість компонента.

<ProfileMenu name="Extra small" size="xs" avatarProps={{ initials: 'ES' }} />
<ProfileMenu name="Small" size="sm" avatarProps={{ initials: 'S' }} />
<ProfileMenu name="Default" avatarProps={{ initials: 'D' }} />

Керування менюCopy Anchor Link

Для некерованого режиму використовуйте defaultOpen. Для керованого режиму передайте open і змінюйте його через onOpenChange. placement визначає сторону відкриття, а menuWidth — ширину меню. menuProps передає додаткові параметри внутрішньому Menu, крім entries, aria-label і width.

const [open, setOpen] = useState(false);

<ProfileMenu
  name="Alex Johnson"
  entries={entries}
  open={open}
  onOpenChange={setOpen}
  placement="bottom-end"
  menuWidth={240}
  menuProps={{ selectable: true }}
/>

API ReferenceCopy Anchor Link

ConfigProviderCopy Anchor Link

Глобальні значення можна задати через ConfigProvider.components.profileMenu. Instance props мають пріоритет над provider defaults.

<ConfigProvider
  components={{
    profileMenu: {
      display: 'compact',
      size: 'sm',
      menuWidth: 220,
      placement: 'bottom-end',
      matchTriggerWidth: false,
    },
  }}
>
  <ProfileMenu name="Alex Johnson" entries={entries} />
</ConfigProvider>

Provider підтримує display, size, menuWidth, placement і matchTriggerWidth. Параметри fullWidth і showBackground є локальними параметрами компонента й задаються безпосередньо на ProfileMenu.

Accessibility і стилізаціяCopy Anchor Link

Тригер має доступну назву aria-label, яка за замовчуванням дорівнює Open profile menu. Для власного аватара та іконок використовуйте коректні aria-label або aria-hidden. Пункти entries передаються до Menu, тому підтримують його стани, розділювачі, небезпечні дії та клавіатурну навігацію.

Для додаткового оформлення використовуйте className і CSS. Параметр showBackground={false} є стандартним способом прибрати фон тригера, а avatarProps.className можна використати для стилізації аватара.