Account Menu

#Installation & usage

Use it at the end of an App Header or at the foot of a Sidebar: the one place a person finds their profile, settings, theme and the way out. It's a Dropdown Menu with the account parts already laid out, so build your own dropdown when the menu isn't about the signed-in user. When switching workspaces is a main job in the app, give it a Workspace Switcher of its own.

import {
  AccountMenu,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuShortcut,
  type AccountMenuUser,
} from '@youj/react'

export function Account({ user, onSignOut }: { user: AccountMenuUser; onSignOut: () => void }) {
  return (
    <AccountMenu user={user} onSignOut={onSignOut}>
      <DropdownMenuGroup>
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>
          Settings
          <DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuGroup>
    </AccountMenu>
  )
}

The trigger is the user's avatar, with their initials until the image loads (or if it fails). The menu opens with a profile header: a larger avatar, the name and the email, each truncated when it runs long. Then, in order and each behind a separator:

1. Workspaces, when you pass workspaces: a radio group of logos and names, with a check on workspace. onWorkspaceChange reports a choice.
2. Your items: children, any Dropdown Menu rows and groups.
3. Theme, when you pass theme or colorMode: a submenu with the built-in presets, each wearing its accent, and an appearance choice of light, dark or system.
4. Sign out, when you pass onSignOut.

#Description

import { useState } from 'react'
import { AccountMenu, type AccountMenuUser } from '@youj/react'
import { ThemeScope, presetById, type ColorMode } from '@youj/core'

export function ThemedAccount({ user }: { user: AccountMenuUser }) {
  const [theme, setTheme] = useState('basalt')
  const [mode, setMode] = useState<ColorMode>('dark')

  return (
    <ThemeScope theme={presetById(theme)}>
      <AccountMenu user={user} theme={theme} onThemeChange={setTheme} colorMode={mode} onColorModeChange={setMode} />
    </ThemeScope>
  )
}

#Code