website/src/app/(payload)/admin/_components/admin-avatar-menu.tsx

'use client'

import { useConfig } from '@payloadcms/ui'
import { formatAdminURL } from 'payload/shared'

export function AdminAvatarMenu() {
  const {
    config: {
      admin: {
        routes: { account: accountRoute, logout: logoutRoute },
      },
      routes: { admin: adminRoute },
    },
  } = useConfig()

  const logoutHref = formatAdminURL({ adminRoute, path: logoutRoute })
  const accountHref = formatAdminURL({ adminRoute, path: accountRoute })

  return (
    <span className="eversolo-admin-avatar-menu">
      <span className="eversolo-admin-avatar-menu__initial" aria-hidden="true">
        E
      </span>
      <span className="eversolo-admin-avatar-menu__panel">
        <span className="eversolo-admin-avatar-menu__label">Account</span>
        <button
          className="eversolo-admin-avatar-menu__button"
          onClick={(event) => {
            event.preventDefault()
            event.stopPropagation()
            window.location.assign(logoutHref)
          }}
          type="button"
        >
          Log out
        </button>
        <button
          className="eversolo-admin-avatar-menu__link"
          onClick={(event) => {
            event.preventDefault()
            event.stopPropagation()
            window.location.assign(accountHref)
          }}
          type="button"
        >
          Profile
        </button>
      </span>
    </span>
  )
}