Hesap menüsü

Hesap menüsü, kullanıcıya ait bağlantıları ve tercihleri tek yerde toplar. AppShell şablonu onu üst çubuğun en sonuna koyar; dar ekranda ad gizlenir, avatar kalır.

Önizleme

Üst çubuğun sonundaki ada basın. Ok tuşlarıyla gezin; sağ ok “Çalışma alanı” ve “Tema” alt menülerini açar. “Çıkış yap” örnekte bir kısa bildirim gösterir. Sayfa başlığındaki marka ve mod seçimi önizlemeyi de değiştirir.

Canlı örnek, StorybookStorybook'ta aç

Canlı örnek, StorybookStorybook'ta aç

Canlı örnek, StorybookStorybook'ta aç

Kod

pnpm add @bigbang/ui

Veri	Tür	Not
Kullanıcı	{ name, email }	Ad düğmede ve avatarda, e-posta grup başlığında.
Çalışma alanı	string	Seçim değişince uygulama o alanı açar; örnek kısa bildirim gösterir.
onSignOut	() => void	Çıkışı uygulama yapar.

import { Avatar, Button, DropdownMenu, Icon, useToast } from '@bigbang/ui';
import { useState } from 'react';
import type { Lang } from '../../patterns/lang';

const copy = {
  tr: {
    name: 'Kullanıcı A',
    trigger: 'Hesap menüsü: Kullanıcı A',
    account: 'kullanici.a@ornek.com',
    profile: 'Profil',
    settings: 'Ayarlar',
    workspace: 'Çalışma alanı',
    workspaces: ['Çalışma alanı 1', 'Çalışma alanı 2'],
    switched: (name: string) => `${name} açıldı.`,
    theme: 'Tema',
    themes: { light: 'Açık', dark: 'Koyu', system: 'Sistem' },
    help: 'Yardım',
    signOut: 'Çıkış yap',
    signedOut: 'Oturum kapatıldı.',
  },
  en: {
    name: 'User A',
    trigger: 'Account menu: User A',
    account: 'user.a@example.com',
    profile: 'Profile',
    settings: 'Settings',
    workspace: 'Workspace',
    workspaces: ['Workspace 1', 'Workspace 2'],
    switched: (name: string) => `${name} opened.`,
    theme: 'Theme',
    themes: { light: 'Light', dark: 'Dark', system: 'System' },
    help: 'Help',
    signOut: 'Sign out',
    signedOut: 'Signed out.',
  },
};

export type AccountMenuProps = {
  lang?: Lang;
  /** Opens the menu on first render. */
  defaultOpen?: boolean;
  /** Runs on "Sign out". The demo shows a toast. */
  onSignOut?: () => void;
};

/**
 * The account menu at the end of the app header: the person's avatar and name open a DropdownMenu
 * with profile and settings links, a workspace submenu, a theme choice, help and sign-out.
 */
export function AccountMenu({ lang = 'tr', defaultOpen = false, onSignOut }: AccountMenuProps) {
  const t = copy[lang];
  const toast = useToast();
  const [workspace, setWorkspace] = useState(t.workspaces[0] ?? '');
  const [theme, setTheme] = useState('system');
  return (
    <DropdownMenu
      align="end"
      defaultOpen={defaultOpen}
      trigger={
        <Button variant="tertiary" size="sm" aria-label={t.trigger} startIcon={<Avatar name={t.name} size="xs" decorative />} endIcon={<Icon name="chevron-down" />}>
          <span className="hidden sm:inline">{t.name}</span>
        </Button>
      }
    >
      <DropdownMenu.Group label={t.account}>
        <DropdownMenu.LinkItem href="#" icon="user">
          {t.profile}
        </DropdownMenu.LinkItem>
        <DropdownMenu.LinkItem href="#" icon="settings">
          {t.settings}
        </DropdownMenu.LinkItem>
      </DropdownMenu.Group>
      <DropdownMenu.Separator />
      <DropdownMenu.Submenu label={t.workspace} icon="layout-grid">
        <DropdownMenu.RadioGroup
          label={t.workspace}
          value={workspace}
          onValueChange={(value) => {
            setWorkspace(value);
            toast.show({ title: t.switched(value) });
          }}
        >
          {t.workspaces.map((name) => (
            <DropdownMenu.RadioItem key={name} value={name}>
              {name}
            </DropdownMenu.RadioItem>
          ))}
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Submenu>
      <DropdownMenu.Submenu label={t.theme} icon="sun">
        <DropdownMenu.RadioGroup label={t.theme} value={theme} onValueChange={setTheme}>
          {(['light', 'dark', 'system'] as const).map((value) => (
            <DropdownMenu.RadioItem key={value} value={value}>
              {t.themes[value]}
            </DropdownMenu.RadioItem>
          ))}
        </DropdownMenu.RadioGroup>
      </DropdownMenu.Submenu>
      <DropdownMenu.LinkItem href="#" icon="circle-help">
        {t.help}
      </DropdownMenu.LinkItem>
      <DropdownMenu.Separator />
      <DropdownMenu.Item icon="log-out" onSelect={onSignOut ?? (() => toast.show({ title: t.signedOut }))}>
        {t.signOut}
      </DropdownMenu.Item>
    </DropdownMenu>
  );
}

Yapı

1. Tetik: tertiary Button, başta süs Avatar (decorative), sonda aşağı ok.
2. DropdownMenu (align="end").
3. E-posta başlıklı grup: Profil ve Ayarlar bağlantıları (DropdownMenu.LinkItem).
4. “Çalışma alanı” ve “Tema” alt menüleri; her biri tek seçimli RadioGroup.
5. Yardım bağlantısı, ayraç ve en sonda “Çıkış yap”.

Hareket

Menü motion.popover ile tetiğin altından solup ölçeklenerek açılır; alt menüler yanından açılır. Azaltılmış harekette yalnızca kısa solma kalır.

Erişilebilirlik

• Tetiğin adı “Hesap menüsü: Kullanıcı A”dır; görünen ad bu adın içinde geçer (label-in-name). Avatar decorative’dir, ad iki kez okunmaz.
• Menü menu rolündedir; ok tuşları, Home/End ve harf ile gezilir. Alt menü öğeleri aria-haspopup="menu" taşır, sağ ok açar, sol ok kapatır.
• Tema ve çalışma alanı seçenekleri menuitemradio’dur; seçili olan aria-checked ile okunur.
• Escape menüyü kapatıp odağı tetiğe döndürür; bir öğe seçilince de odak tetiğe döner.
• Bağlantılar gerçek a öğeleridir; yeni sekmede açılabilir.

Kullanılan bileşenler

DropdownMenu, Avatar, Button, Icon, Toast.