53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { classNames } from '@standardnotes/utils'
|
|
import { useRef } from 'react'
|
|
import AccountMenu, { AccountMenuProps } from '../AccountMenu/AccountMenu'
|
|
import Icon from '../Icon/Icon'
|
|
import Popover from '../Popover/Popover'
|
|
import StyledTooltip from '../StyledTooltip/StyledTooltip'
|
|
import { observer } from 'mobx-react-lite'
|
|
import { AccountMenuController } from '@/Controllers/AccountMenu/AccountMenuController'
|
|
|
|
type Props = AccountMenuProps & {
|
|
controller: AccountMenuController
|
|
hasError: boolean
|
|
toggleMenu: () => void
|
|
user: unknown
|
|
}
|
|
|
|
const AccountMenuButton = ({ hasError, controller, mainApplicationGroup, onClickOutside, toggleMenu, user }: Props) => {
|
|
const buttonRef = useRef<HTMLButtonElement>(null)
|
|
const { show: isOpen } = controller
|
|
|
|
return (
|
|
<>
|
|
<StyledTooltip label="Open account menu">
|
|
<button
|
|
ref={buttonRef}
|
|
onClick={toggleMenu}
|
|
className={classNames(
|
|
isOpen ? 'bg-border' : '',
|
|
'flex h-full w-8 cursor-pointer items-center justify-center rounded-full',
|
|
)}
|
|
>
|
|
<div className={hasError ? 'text-danger' : user ? 'text-info' : 'text-neutral'}>
|
|
<Icon type="account-circle" className="h-5 w-5 hover:text-info" />
|
|
</div>
|
|
</button>
|
|
</StyledTooltip>
|
|
<Popover
|
|
title="Account"
|
|
anchorElement={buttonRef}
|
|
open={isOpen}
|
|
togglePopover={toggleMenu}
|
|
side="top"
|
|
align="start"
|
|
className="py-2"
|
|
>
|
|
<AccountMenu onClickOutside={onClickOutside} mainApplicationGroup={mainApplicationGroup} />
|
|
</Popover>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default observer(AccountMenuButton)
|