Function Header

packages/console/app/src/component/header.tsx:38–288

(props: { zen?: boolean; go?: boolean; hideGetStarted?: boolean })

}

export function Header(props: { zen?: boolean; go?: boolean; hideGetStarted?: boolean }) {
  const navigate = useNavigate()
  const i18n = useI18n()
  const language = useLanguage()

  const [store, setStore] = createStore({
    mobileMenuOpen: false,
    contextMenuOpen: false,
    contextMenuPosition: { x: 0, y: 0 },
  })

  createEffect(() => {
    const handleClickOutside = () => {
      setStore("contextMenuOpen", false)
    }

    const handleContextMenu = (event: MouseEvent) => {
      event.preventDefault()
      setStore("contextMenuOpen", false)
    }

    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setStore("contextMenuOpen", false)
      }
    }

    if (store.contextMenuOpen) {
      document.addEventListener("click", handleClickOutside)
      document.addEventListener("contextmenu", handleContextMenu)
      document.addEventListener("keydown", handleKeyDown)
      onCleanup(() => {
        document.removeEventListener("click", handleClickOutside)
        document.removeEventListener("contextmenu", handleContextMenu)
        document.removeEventListener("keydown", handleKeyDown)
      })
    }
  })

  const handleLogoContextMenu = (event: MouseEvent) => {
    event.preventDefault()
    const logoElement = (event.currentTarget as HTMLElement).querySelector("a")
    if (logoElement) {
      const rect = logoElement.getBoundingClientRect()
      setStore("contextMenuPosition", {
        x: rect.left - 16,
        y: rect.bottom + 8,
      })
    }
    setStore("contextMenuOpen", true)
  }

  const copyWordmarkToClipboard = async () => {
    try {
      const isDark = isDarkMode()
      const wordmarkSvgPath = isDark ? copyWordmarkSvgDark : copyWordmarkSvgLight
      const wordmarkSvg = await fetchSvgContent(wordmarkSvgPath)
      await navigator.clipboard.writeText(wordmarkSvg)