function Header()

in theme/src/components/header.js [14:101]
85 lines of code
5 McCabe index (conditional complexity)

function Header({isSearchEnabled}) {
  const {theme} = useTheme()
  const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState(theme.breakpoints[2])
  const [isMobileSearchOpen, setIsMobileSearchOpen] = React.useState(false)
  const siteMetadata = useSiteMetadata()
  return (
    <ThemeProvider colorMode="night" nightScheme="dark_dimmed">
      <Sticky>
        <Box
          display="flex"
          height={HEADER_HEIGHT}
          px={[3, null, null, 4]}
          alignItems="center"
          justifyContent="space-between"
          bg="canvas.default"
        >
          <Box display="flex" alignItems="center">
            <Link
              href="https://primer.style"
              sx={{
                color: 'accent.fg',
                mr: 3,
                lineHeight: 'condensedUltra'
              }}
            >
              <StyledOcticon icon={MarkGithubIcon} size="medium" />
            </Link>
            <Link
              href="https://primer.style"
              sx={{
                color: 'accent.fg',
                fontFamily: 'mono',
                display: [
                  // We only hide "Primer" on small viewports if a shortName is defined.
                  siteMetadata.shortName ? 'none' : 'inline-block',
                  null,
                  null,
                  'inline-block'
                ]
              }}
            >
              Primer
            </Link>

            {siteMetadata.shortName ? (
              <>
                <Text display={['none', null, null, 'inline-block']} color="accent.fg" fontFamily="mono" mx={2}>
                  /
                </Text>
                <Link
                  as={GatsbyLink}
                  to="/"
                  sx={{
                    color: 'accent.fg',
                    fontFamily: 'mono'
                  }}
                >
                  {siteMetadata.shortName}
                </Link>
              </>
            ) : null}

            {isSearchEnabled ? (
              <Box display={['none', null, null, 'block']} ml={4}>
                <Search />
              </Box>
            ) : null}
          </Box>
          <Box>
            <Box display={['none', null, null, 'block']}>
              <PrimerNavItems items={primerNavItems} />
            </Box>
            <Box display={['flex', null, null, 'none']}>
              {isSearchEnabled ? (
                <>
                  <Button
                    aria-label="Search"
                    aria-expanded={isMobileSearchOpen}
                    onClick={() => setIsMobileSearchOpen(true)}
                    sx={{
                      ml: 3
                    }}
                  >
                    <SearchIcon />
                  </Button>
                  <MobileSearch isOpen={isMobileSearchOpen} onDismiss={() => setIsMobileSearchOpen(false)} />
                </>
              ) : null}