text: /**
   * Copyright (c) 2013-present, Facebook, Inc.
   *
   * @emails react-core
   * @flow
   */
  
  import Container from 'components/Container';
  import HeaderLink from './HeaderLink';
  import {Link} from 'gatsby';
  import React from 'react';
  import {colors, fonts, media} from 'theme';
  import {version} from 'site-constants';
  import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
  import DocSearch from './DocSearch';
  
  import logoSvg from 'icons/logo.svg';
  
  const Header = ({location}: {location: Location}) => (
    <header
      css={{
        backgroundColor: colors.darker,
        color: colors.white,
        position: 'fixed',
        zIndex: 1,
        width: '100%',
        top: 0,
        left: 0,
      }}>
      <Container>
        <div
          css={{
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
            height: 60,
            [media.between('small', 'large')]: {
              height: 50,
            },
            [media.lessThan('small')]: {
              height: 40,
            },
          }}>
          <Link
            css={{
              display: 'flex',
              marginRight: 10,
              height: '100%',
              alignItems: 'center',
              color: colors.brand,
  
              ':focus': {
                outline: 0,
                color: colors.white,
              },
  
              [media.greaterThan('small')]: {
                width: 'calc(100% / 6)',
              },
              [media.lessThan('small')]: {
                flex: '0 0 auto',
              },
            }}
            to="/">
            <img src={logoSvg} alt="" height="20" />
            <span
              css={{
                color: 'inherit',
                marginLeft: 10,
                fontWeight: 700,
                fontSize: 20,
                lineHeight: '20px',
                [media.lessThan('large')]: {
                  fontSize: 16,
                  marginTop: 1,
                },
                [media.lessThan('small')]: {
                  // Visually hidden
                  position: 'absolute',
                  overflow: 'hidden',
                  clip: 'rect(0 0 0 0)',
                  height: 1,
                  width: 1,
                  margin: -1,
                  padding: 0,
                  border: 0,
                },
              }}>
              React
            </span>
          </Link>
  
          <nav
            css={{
              flex: '1',
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'stretch',
              overflowX: 'auto',
              overflowY: 'hidden',
              WebkitOverflowScrolling: 'touch',
              height: '100%',
  
              // Hide horizontal scrollbar
              scrollbarWidth: 'none',
              msOverflowStyle: 'none',
              '::-webkit-scrollbar': {
                display: 'none',
              },
  
              [media.size('xsmall')]: {
                flexGrow: '1',
                width: 'auto',
              },
              [media.greaterThan('xlarge')]: {
                width: null,
              },
              [media.lessThan('small')]: {
                maskImage:
                  'linear-gradient(to right, transparent, black 20px, black 90%, transparent)',
              },
            }}>
            <HeaderLink
              isActive={location.pathname.includes('/docs/')}
              title="文档"
              to="/docs/getting-started.html"
            />
            <HeaderLink
              isActive={location.pathname.includes('/tutorial/')}
              title="教程"
              to="/tutorial/tutorial.html"
            />
            <HeaderLink
              isActive={location.pathname.includes('/blog')}
              title="博客"
              to="/blog/"
            />
            <HeaderLink
              isActive={location.pathname.includes('/community/')}
              title="社区"
              to="/community/support.html"
            />
          </nav>
  
          <DocSearch />
  
          <div
            css={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              width: 'auto',
  
              //[media.lessThan('medium')]: {
              //width: 'auto',
              //},
              //[media.greaterThan('large')]: {
              //width: 'calc(100% / 4)',
              //},
            }}>
            <Link
              css={{
                padding: '5px 10px',
                whiteSpace: 'nowrap',
                ...fonts.small,
  
                ':hover': {
                  color: colors.brand,
                },
  
                ':focus': {
                  outline: 0,
                  backgroundColor: colors.lighter,
                  borderRadius: 15,
                },
  
                [media.lessThan('medium')]: {
                  display: 'none',
                },
              }}
              to="/versions">
              v{version}
            </Link>
            <Link
              css={{
                display: 'flex',
                alignItems: 'center',
                padding: '5px 10px',
                whiteSpace: 'nowrap',
                ...fonts.small,
  
                ':hover': {
                  color: colors.brand,
                },
  
                ':focus': {
                  outline: 0,
                  backgroundColor: colors.lighter,
                  borderRadius: 15,
                },
              }}
              to="/languages">
              <LanguagesIcon />{' '}
              <span
                css={{
                  marginLeft: '0.5rem',
  
                  [media.lessThan('medium')]: {
                    display: 'none',
                  },
                }}>
                多语言
              </span>
            </Link>
            <a
              css={{
                padding: '5px 10px',
                marginLeft: 10,
                whiteSpace: 'nowrap',
                ...fonts.small,
  
                ':hover': {
                  color: colors.brand,
                },
  
                ':focus': {
                  outline: 0,
                  backgroundColor: colors.lighter,
                  borderRadius: 15,
                },
  
                [media.lessThan('large')]: {
                  display: 'none',
                },
              }}
              href="https://github.com/facebook/react/"
              target="_blank"
              rel="noopener">
              GitHub
              <ExternalLinkSvg
                cssProps={{
                  marginLeft: 5,
                  verticalAlign: -2,
                  color: colors.subtle,
                }}
              />
            </a>
          </div>
        </div>
      </Container>
    </header>
  );
  
  const LanguagesIcon = () => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none" />
      <path
        css={{fill: 'currentColor'}}
        d="
          M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5
          7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09
          5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62
          7l1.62-4.33L19.12 17h-3.24z
        "
      />
    </svg>
  );
  
  export default Header;
  