Function UserMenu

frontend/src/components/auth/UserMenu.tsx:27–464

({
  variant = 'header',
  className = '',
})

}

const UserMenu: React.FC<UserMenuProps> = ({
  variant = 'header',
  className = '',
}) => {
  const { t } = useTranslation();
  const { user, isAuthenticated, logout, isLoading } = useAuth();
  const { setActiveProvider } = useAIStore();
  const { showSuccess } = useNotifications();

  const [showAuthModal, setShowAuthModal] = useState(false);
  const [authModalMode, setAuthModalMode] = useState<'login' | 'signup'>(
    'login'
  );
  const [showDropdown, setShowDropdown] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setShowDropdown(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const handleLogout = async () => {
    await logout();
    setShowDropdown(false);

    // Show success notification for signout
    showSuccess(
      t('auth.userMenu.signOutSuccess', { defaultValue: 'Signed out successfully' }),
      t('auth.userMenu.signOutMessage', { defaultValue: "You've been securely signed out of DataKit." }),
      {
        icon: 'shield',
        duration: 3000,
      }
    );
  };

  const goToSettings = () => {
    setShowDropdown(false);
    // Navigate to settings page
    window.location.href = '/settings';
  };

  const handleOpenAuthModal = (mode: 'login' | 'signup') => {
    setAuthModalMode(mode);
    setShowAuthModal(true);
  };

  // Don't show auth buttons while auth status is loading