src/ui/Header.js

import React, { useEffect, useState } from "react"
import styled from "styled-components"
import { Plus, Menu, X } from "react-feather"
import { Box, Flex, Image, Button } from "rebass"
import { Link, StaticQuery, graphql } from "gatsby"

import { isWindow } from "src/utils/checks"
import { Search } from "src/ui/Search"
import { Container } from "src/ui/Container"
import logo from "src/images/logo.png"

const isWindowPresent = isWindow()


const disableScroll = () => {
  if (isWindowPresent) {
    const scrollbarWidth =
      window.innerWidth - window.document.documentElement.clientWidth
    window.document.body.classList.add('modal-open')
    window.document.body.style.paddingRight = `${scrollbarWidth}px`
  }
}

const enableScroll = () => {
  if (isWindowPresent) {
    window.document.body.classList.remove('modal-open')
    window.document.body.style.paddingRight = `0px`
  }
}

export const Header = ({ hideSearch }) => {
  const [isBurgerMenuOpen, setIsBurgerMenu] = useState(false)
  const [isScrolledTop, setHeaderVisibility] = useState(true)
  let prevScrollPosition = isWindowPresent && window.scrollY

  const handleScrollDirection = () => {
    if (prevScrollPosition > window.scrollY && window.scrollY > 100) {
      setHeaderVisibility(true)
    }
    if (prevScrollPosition < window.scrollY && window.scrollY > 150) {
      setHeaderVisibility(false)
    }
    prevScrollPosition = window.scrollY
  }

  useEffect(() => {
    isWindowPresent && window.addEventListener("scroll", handleScrollDirection)
    isBurgerMenuOpen ? disableScroll() : enableScroll()
    return () =>
    isWindowPresent && window.removeEventListener("scroll", handleScrollDirection)
  }, [isBurgerMenuOpen])

  const handleBurgerMenuClick = e => {
    e.preventDefault()
    setIsBurgerMenu(!isBurgerMenuOpen)
  }

  return (
    <StaticQuery
      query={query}
      render={({ allDatoCmsCategory: { nodes } }) => (
        <StyledHeader isVisible={isScrolledTop}>
          {isBurgerMenuOpen && (
            <BurgerMenuBackground
              alignItems={"center"}
              flexDirection={"column"}
              justifyContent={"space-around"}
              backgroundColor="black"
            >
              <Links
                flexDirection={"column"}
                alignItems={"center"}
                justifyContent={"space-between"}
              >
                {nodes.map(({ slug, title, id }) => (
                  <Link
                    key={id}
                    to={`/category/${slug}`}
                    css={{
                      display: "block",
                      marginBottom: "24px",
                      fontSize: "3.0vh",
                    }}
                  >
                    {title}
                  </Link>
                ))}
                {[...serviceLinks, ...mobileLinks].map(({ slug, title }) => (
                  <Link
                    key={slug}
                    to={`/${slug}`}
                    css={{
                      display: "block",
                      marginBottom: "24px",
                      fontSize: "3.0vh",
                    }}
                  >
                    {title}
                  </Link>
                ))}
              </Links>
            </BurgerMenuBackground>
          )}
          <Container>
            <Flex
              alignItems={"center"}
              justifyContent={"space-between"}
              mb={[0, 0, 0, 3]}
            >
              <Link to="/">
                <Image
                  src={logo}
                  alt="logo"
                  width={["120px"]}
                  css={{
                    zIndex: "20",
                    position: "relative",
                  }}
                ></Image>
              </Link>
              {!hideSearch && <StyledSearch position="header" />}
              <SubmitVideoButton variant="primary">
                <Plus size={"16"}></Plus>
                <span>Submit video</span>
              </SubmitVideoButton>
              <BurgerMenu onClick={handleBurgerMenuClick}>
                {!isBurgerMenuOpen && <Menu size={"32"} color={"white"}></Menu>}
                {isBurgerMenuOpen && <X size={"32"} color={"white"}></X>}
              </BurgerMenu>
            </Flex>
            <Flex justifyContent={"space-between"}>
              <Navigation>
                <Box as="ul" m={"0"} pl={"0"}>
                  {nodes.map(({ slug, title, id }) => (
                    <Box as="li" key={id} mr={"6"}>
                      <Link to={`/category/${slug}`}>{title}</Link>
                    </Box>
                  ))}
                </Box>
              </Navigation>
              <Navigation>
                <Box as="ul" m={"0"} pl={"0"}>
                  {serviceLinks.map(({ slug, title }) => (
                    <Box as="li" key={slug} mr={"6"}>
                      <Link to={`/${slug}`}>{title}</Link>
                    </Box>
                  ))}
                </Box>
              </Navigation>
            </Flex>
          </Container>
        </StyledHeader>
      )}
    />
  )
}

const query = graphql`
  query Categories {
    allDatoCmsCategory {
      nodes {
        title
        slug
        id
      }
    }
  }
`

const serviceLinks = [
  { slug: "blog", title: "Blog" },
  { slug: "about-us", title: "About us" },
  { slug: "contact", title: "Contact us" },
]

const mobileLinks = [{ slug: "search", title: "Search" }]

const StyledHeader = styled.header`
  background-color: ${({ theme }) => theme.colors.black};
  padding-top: 16px;
  padding-bottom: 16px;
  transition: all 0.2s;
  position: sticky;
  z-index: 100;
  top: -110px;
  transition: top 0.55s ease-in-out;

  ${({ isVisible }) =>
    isVisible &&
    `
    top:0;
    `}
`

const Navigation = styled.nav`
  ul {
    display: flex;
  }

  li {
    list-style: none;
    &:last-child {
      margin-right: 0;
    }
  }

  a {
    transition: all 0.3s;
    text-decoration: none;
    font-weight: 500;
    color: ${({ theme }) => theme.colors.white};

    &:hover {
      color: ${({ theme }) => theme.colors.red};
    }
  }

  @media (max-width: ${({ theme }) => theme.breakpoints[2]}) {
    display: none;
  }
`

const SubmitVideoButton = styled(Button)`
  display: flex;
  align-items: center;

  span {
    margin-left: 4px;
  }

  @media (max-width: ${({ theme }) => theme.breakpoints[2]}) {
    display: none;
  }
`

const BurgerMenu = styled.button`
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background-color: transparent;
  display: none;
  outline: none;
  &:hover {
    cursor: pointer;
  }
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  @media (max-width: ${({ theme }) => theme.breakpoints[2]}) {
    display: block;
  }
`

const StyledSearch = styled(Search)`
  transition: all 0.2s;

  @media (max-width: ${({ theme }) => theme.breakpoints[2]}) {
    display: none;
  }
`
const BurgerMenuBackground = styled(Flex)`
  position: fixed;
  height: calc(100% + 72px);
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  a {
    transition: all 0.3s;
    text-decoration: none;
    font-weight: 500;
    color: ${({ theme }) => theme.colors.white};
    &:hover {
      color: ${({ theme }) => theme.colors.red};
    }
  }
`
const Links = styled(Flex)`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
`