Remove SASS from components

src/components/Header.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect, useRef } from "react";
+import Navigation from "./Navigation";
+import throttle from "lodash/throttle";
+import styled from "styled-components";
+import { colors } from "@theme/colors";
+import NavigationMobile from "./NavigationMobile";
+import HeaderLogo from "./HeaderLogo";
+
+const StyledHeader = styled.header<{isHidden?: boolean}>`
+  display: flex;
+  flex-flow: row nowrap;
+  @media screen and (max-width: 600px) {
+    flex-flow: column nowrap;
+  }
+`;
+
+const Sticky = styled.div`
+  position: sticky;
+  top: 0;
+  z-index: 10;
+
+  padding: 0 1rem;
+  background-color: ${colors.darkBlue};
+  transition: all 200ms ease-out;
+
+  ${(p) => p.isHidden ? (`
+    transition: all 200ms ease-in;
+    transform: translateY(-100%);
+  `) : null}
+`;
+
+
+const PREVENT_IS_HIDDEN_Y = 150;
+
+const Header: React.FC = () => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [isHidden, setHidden] = useState(false);
+  const yCoord = useRef(0);
+
+  const handleScroll = () => {
+    const newCoord = window.pageYOffset;
+    if (!mobileMenuOpen && newCoord > yCoord.current && newCoord > PREVENT_IS_HIDDEN_Y) {
+      setHidden(true);
+    } else {
+      setHidden(false);
+    }
+    yCoord.current = newCoord;
+  };
+
+  const handleMobileMenuClick = () => setMobileMenuOpen(!mobileMenuOpen);
+
+  useEffect(() => {
+    const func = throttle(handleScroll, 200);
+    // Prevents hide when clicking mobileMenuOpen
+    handleScroll();
+    window.addEventListener("scroll", func);
+    return () => window.removeEventListener("scroll", func);
+  }, [isHidden, mobileMenuOpen]);
+
+
+  return (
+    <Sticky>
+      <StyledHeader isHidden={isHidden}>
+        <HeaderLogo />
+        <Navigation onMobileMenuOpen={handleMobileMenuClick} />
+      </StyledHeader>
+      <NavigationMobile isOpen={mobileMenuOpen} />
+    </Sticky>
+  )
+}
+
+export default Header;