Repository: streamlit/streamlit
File: frontend/app/src/components/Logo/LogoComponent.tsx (TypeScript)

Code before:
  NavigationContext,
} from "@streamlit/lib"
import { Logo } from "@streamlit/protobuf"

const LOG = getLogger("LogoComponent")

export interface LogoComponentProps {
  appLogo: Logo | null
  endpoints: StreamlitEndpoints
  collapsed?: boolean
  componentName?: string
  dataTestId?: string
}

/**
 * Shared component for rendering the app logo that works in both Sidebar and Header contexts.
 */
const LogoComponent = ({
  appLogo,
  endpoints,
  collapsed = false,
  componentName = "Logo",
  dataTestId = "stLogo",
}: LogoComponentProps): ReactElement | null => {
  const { resourceCrossOriginMode } = useContext(LibConfigContext)
  const { appPages, onPageChange, currentPageScriptHash } =
    useContext(NavigationContext)

  // Find the home page (the default page) and check if this is a multi-page app
  const homePage = useMemo(
    () => appPages.find(page => page.isDefault),
    [appPages]
  )
  const isMultiPageApp = appPages.length > 1

  const handleLogoClick = useCallback(() => {
    // Only navigate if we're not already on the home page
    if (
      homePage?.pageScriptHash &&
      currentPageScriptHash !== homePage.pageScriptHash
    ) {
      onPageChange(homePage.pageScriptHash)
    }
  }, [homePage, onPageChange, currentPageScriptHash])

  if (!appLogo) {
    return null
  }

  const handleLogoError = (logoUrl: string): void => {
    // StyledLogo does not retain the e.currentEvent.src like other onerror cases

Review comment (suggestion):
**Suggestion**: In a MPA, when you are on the home page, this will still render the logo as a clickable button (with hover effect / cursor) - though its a bit more work I think it should only render as clickable button when not already on the home page

https://github.com/user-attachments/assets/7750e391-4d83-46a0-ba2b-331c8d02f711

Code after:
  NavigationContext,
} from "@streamlit/lib"
import { Logo } from "@streamlit/protobuf"

const LOG = getLogger("LogoComponent")

export interface LogoComponentProps {
  appLogo: Logo | null
  endpoints: StreamlitEndpoints
  collapsed?: boolean
  componentName?: string
  dataTestId?: string
}

/**
 * Shared component for rendering the app logo that works in both Sidebar and Header contexts.
 */
const LogoComponent = ({
  appLogo,
  endpoints,
  collapsed = false,
  componentName = "Logo",
  dataTestId = "stLogo",
}: LogoComponentProps): ReactElement | null => {
  const { resourceCrossOriginMode } = useContext(LibConfigContext)
  const { appPages, onPageChange, currentPageScriptHash } =
    useContext(NavigationContext)

  // Find the home page (the default page) and check if this is a multi-page app
  const homePage = useMemo(
    () => appPages.find(page => page.isDefault),
    [appPages]
  )
  const isMultiPageApp = appPages.length > 1
  const isOnHomePage = homePage?.pageScriptHash === currentPageScriptHash

  const handleLogoClick = useCallback(() => {
    // Only navigate if we're not already on the home page
    if (homePage?.pageScriptHash && !isOnHomePage) {
      onPageChange(homePage.pageScriptHash)
    }
  }, [homePage, onPageChange, isOnHomePage])

  if (!appLogo) {
    return null
  }

  const handleLogoError = (logoUrl: string): void => {
    // StyledLogo does not retain the e.currentEvent.src like other onerror cases
    LOG.error(`Client Error: ${componentName} source error - ${logoUrl}`)
    endpoints.sendClientErrorToHost(