Function ProfileMenu

packages/shared/src/components/ProfileMenu/ProfileMenu.tsx:39–111

({
  onClose,
}: ProfileMenuProps)

}

export default function ProfileMenu({
  onClose,
}: ProfileMenuProps): ReactElement | null {
  const { events } = useRouter();
  const { user, logout } = useAuthContext();
  const { showIndicator: showProfileCompletion } =
    useProfileCompletionIndicator();

  useEffect(() => {
    events.on('routeChangeStart', onClose);

    return () => {
      events.off('routeChangeStart', onClose);
    };
  }, [events, onClose]);

  if (!user) {
    return null;
  }

  return (
    <InteractivePopup
      onClose={onClose}
      closeOutsideClick
      position={InteractivePopupPosition.ProfileMenu}
      className="flex max-h-[calc(100vh-4rem)] w-full max-w-80 flex-col gap-3 overflow-y-auto !rounded-10 border border-border-subtlest-tertiary !bg-accent-pepper-subtlest p-3"
    >
      {showProfileCompletion && <ProfileCompletion />}
      <ProfileMenuHeader />

      <UpgradeToPlus
        target={TargetId.ProfileDropdown}
        size={ButtonSize.Small}
        className="flex-initial"
      />

      <HorizontalSeparator />

      <nav className="flex flex-col gap-2">
        <MainSection />

        <HorizontalSeparator />

        <ThemeSection className="px-1" />

        <HorizontalSeparator />

        <AccountSection />

        {checkIsExtension() && <ExtensionSection />}

        <HorizontalSeparator />

        <ResourceSection />
        <FeedbackButtonSection className="px-1" />

        <HorizontalSeparator />