Function Header

apps/docs/src/components/header.tsx:45–121

()

)

export default function Header() {
  const { t } = useTranslation()
  const ref = React.useRef<HTMLDivElement | null>(null)
  const section = useActiveSection()
  React.useEffect(() => {
    function patchedScrollTo(x: number, y: number) {
      if (y === 0) {
        // We're trying to reset scroll.
        // If we already scrolled past the banner, consider it as y = 0.
        const bannerHeight = ref.current?.offsetHeight ?? 0 // Could be zero (e.g. mobile)
        y = Math.min(window.scrollY, bannerHeight)
      }
      return realScrollTo(x, y)
    }
    const realScrollTo = window.scrollTo
    ;(window as any).scrollTo = patchedScrollTo
    return () => {
      ;(window as any).scrollTo = realScrollTo
    }
  }, [])
  return (
    <div
      ref={ref}
      tw="h-[64px] fixed lg:sticky bg-white text-primary dark:bg-primary dark:text-white hidden top-0 left-0 lg:flex w-full text-base md:text-lg px-5 py-2 sm:py-0 items-center z-[100] shadow"
    >
      <NextLink href="/">
        <a tw="text-lg dark:text-primary-dark mr-0 inline-flex items-center whitespace-nowrap py-1 font-normal sm:mr-3">
          <IconLogo tw="text-link dark:text-link-dark mr-2 text-xl" />
          {t('docs.title')}
        </a>
      </NextLink>
      <div tw="flex gap-4 ml-[140px]">
        <NavLink href="/learn" isActive={section === 'learn' || section === 'home'}>
          {t('docs.learn')}
        </NavLink>
        <NavLink href="/apis" isActive={section === 'apis'}>
          {t('docs.api')}
        </NavLink>
        <NavLink href="/playground" target="_blank" isActive={section === 'playground'}>
          Playground
        </NavLink>
      </div>
      <div tw="justify-end flex flex-1 gap-4 items-center">
        <div tw="w-96">
          <Search />
        </div>
        <div tw="block dark:hidden">
          <button
            type="button"
            aria-label="Use Dark Mode"
            onClick={() => {
              window.__setPreferredTheme('dark')
            }}
            tw="hidden h-full items-center lg:flex"
          >
            {darkIcon}
          </button>
        </div>