Repository: traefik/traefik
File: webui/src/layout/Navigation.tsx (TypeScript)

Code before:
      hubButtonScriptLocal.async = true
      // Source: https://github.com/traefik/traefiklabs-hub-button-app
      hubButtonScriptLocal.src = 'traefiklabs-hub-button-app/main-v1.js'

      hubButtonScriptLocal.onload = () => {
        setHasHubButtonComponent(customElements.get('hub-button-app') !== undefined)
      }

      document.head.appendChild(hubButtonScriptLocal)

      // Remove the remote script on error.
      if (hubButtonScript.parentNode) {
        hubButtonScript.parentNode.removeChild(hubButtonScript)
      }
    }

    document.head.appendChild(hubButtonScript)

    return () => {
      // Remove the scripts on unmount.
      if (hubButtonScript.parentNode) {
        hubButtonScript.parentNode.removeChild(hubButtonScript)
      }
      if (hubButtonScriptLocal?.parentNode) {
        hubButtonScriptLocal.parentNode.removeChild(hubButtonScriptLocal)
      }
    }
  }, [showHubButton])

  return (
    <Flex as="nav" role="navigation" justify="end" align="center" css={{ gap: '$2', mb: '$6' }}>
      {hasHubButtonComponent && (
        <Box css={{ fontFamily: '$rubik', fontWeight: '500 !important' }}>
          <hub-button-app
            key={`dark-mode-${isDarkMode}`}
            style={{ backgroundColor: isDarkMode ? DARK_PRIMARY_COLOR : LIGHT_PRIMARY_COLOR, fontWeight: 'inherit' }}
          />
        </Box>
      )}
      <ThemeSwitcher />

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button ghost variant="secondary" css={{ px: '$2', boxShadow: 'none' }} data-testid="help-menu">
            <FiHelpCircle size={20} />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuPortal>
          <DropdownMenuContent align="end" css={{ zIndex: 9999 }}>
            <DropdownMenuGroup>
              <DropdownMenuItem css={{ height: '$6', cursor: 'pointer' }}>

Review comment (refactor):
I propose to refactor this part to avoid possible leftover scripts and simply to improve the structure :)

```suggestion
    const scripts: HTMLScriptElement[] = []

    const createScript = (scriptSrc: string): HTMLScriptElement => {
      const script = document.createElement('script')
      script.src = scriptSrc
      script.async = true
      scripts.push(script)
      return script
    }

    const updateState = () => {
      setHasHubButtonComponent(customElements.get('hub-button-app') !== undefined)
    }

    // Source: https://github.com/traefik/traefiklabs-hub-button-app
    const hubButtonScript = createScript('https://traefik.github.io/traefiklabs-hub-button-app/main-v1.js')
    hubButtonScript.onload = updateState

    hubButtonScript.onerror = () => {
      // Source: https://github.com/traefik/traefiklabs-hub-button-app
      const hubButtonScriptLocal = createScript('traefiklabs-hub-button-app/main-v1.js')
      hubButtonScriptLocal.onload = updateState

      document.head.appendChild(hubButtonScriptLocal)

      // Remove the remote script on error.
      if (hubButtonScript.parentNode) {
        hubButtonScript.parentNode.removeChild(hubButtonScript)
      }
    }

    document.head.appendChild(hubButtonScript)

    return () => {
      // Remove the scripts on unmount.
      scripts.forEach((script) => {
        if (script.parentNode) {
          script.parentNode.removeChild(script)
        }
      })
    }
```

Code after:
    // Source: https://github.com/traefik/traefiklabs-hub-button-app
    document.head.appendChild(createScript('traefiklabs-hub-button-app/main-v1.js'))

    return () => {
      // Remove the scripts on unmount.
      scripts.forEach((script) => {
        if (script.parentNode) {
          script.parentNode.removeChild(script)
        }
      })
    }
  }, [showHubButton])

  return (
    <Flex as="nav" role="navigation" justify="end" align="center" css={{ gap: '$2', mb: '$6' }}>
      {hasHubButtonComponent && (
        <Box css={{ fontFamily: '$rubik', fontWeight: '500 !important' }}>
          <hub-button-app
            key={`dark-mode-${isDarkMode}`}
            style={{ backgroundColor: isDarkMode ? DARK_PRIMARY_COLOR : LIGHT_PRIMARY_COLOR, fontWeight: 'inherit' }}
          />
        </Box>
      )}
      <ThemeSwitcher />

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button ghost variant="secondary" css={{ px: '$2', boxShadow: 'none' }} data-testid="help-menu">
            <FiHelpCircle size={20} />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuPortal>
          <DropdownMenuContent align="end" css={{ zIndex: 9999 }}>
            <DropdownMenuGroup>
              <DropdownMenuItem css={{ height: '$6', cursor: 'pointer' }}>
                <Link
                  href={`https://doc.traefik.io/traefik/${parsedVersion}`}
                  target="_blank"
                  css={{ textDecoration: 'none', '&:hover': { textDecoration: 'none' } }}
                >
                  <Flex align="center" gap={2}>
                    <FiBookOpen size={20} />
                    <Text>Documentation</Text>
                  </Flex>
                </Link>
              </DropdownMenuItem>
              <DropdownMenuItem css={{ height: '$6', cursor: 'pointer' }}>
                <Link
                  href="https://github.com/traefik/traefik/"
                  target="_blank"
                  css={{ textDecoration: 'none', '&:hover': { textDecoration: 'none' } }}