Frontity header

header.js

import React from "react";
import { connect, styled } from "frontity";
import Link from "../link";
import {useTransition, animated} from 'react-spring';
import { useInView } from 'react-intersection-observer';
import TopNavbar from "./topnavbar";
import Navbar from "./navbar"

const Header = ({ state }) => {
  const [ref, inView] = useInView();
  const transitions = useTransition(!inView, null, {
    from: { position: "fixed", top: 0, left: 0, transform: "translateY(-100%)", width:"100%", maxWidth:"100%"},
    enter: { transform: "translateY(0)" },
    leave: { transform: "translateY(-100%)" }
  });

  return (
    <>
      <div ref={ref}>
        <TopNavbar />
      </div>
      {transitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.div key={key} style={props}>
              <Navbar />
            </animated.div>
          )
      )}
    </>
  );
};

// Connect the Header component to get access to the `state` in it's `props`
export default connect(Header);

const BrandContainer = styled.div`
  box-sizing: border-box;
  color: var(--brand);
  width: 100%;
  @media (min-width: 768px) {
    display: flex;
    width: auto;
  }
`;

const Title = styled.div`
  margin: 0;
  font-size: 20px;
  span {
    font-weight:800;
  }
`;

const StyledLink = styled(Link)`
  text-decoration: none;
  color:var(--brand);
  transition: all 0.3s ease;
  &:hover {
    color:var(--black);
  }
`;