sticky header

packages/website/gatsby-config.js

@@ -14,7 +14,15 @@ module.exports = {
         path: `${__dirname}/src/images`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `src`,
+        path: `${__dirname}/src/`,
+      },
+    },
     `gatsby-transformer-sharp`,
+    `gatsby-transformer-json`,
     `gatsby-plugin-sharp`,
     `gatsby-plugin-react-svg`,
     {
@@ -35,4 +43,4 @@ module.exports = {
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,
   ],
-}
+};

packages/website/package.json

@@ -23,6 +23,7 @@
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sharp": "^3.0.0",
     "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-transformer-json": "^3.1.0",
     "gatsby-transformer-sharp": "^3.0.0",
     "gbimage-bridge": "^0.1.1",
     "normalize.css": "^8.0.1",
@@ -34,6 +35,7 @@
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
     "react-svg-loader": "^3.0.3",
+    "react-use": "^17.2.1",
     "tailwindcss": "^2.0.3"
   },
   "devDependencies": {

packages/website/src/components/Layout/Layout.js

@@ -15,6 +15,19 @@ import Navigation from "../Navigation/Navigation";
 import NewsHeader from "../NewsHeader/NewsHeader";
 import Footer from "../Footer/Footer";
 import FooterNavigation from "../FooterNavigation/FooterNavigation";
+// import { useWindowScroll } from "react-use";
+import classnames from "classnames";
+
+const StickyHeader = () => {
+  // const { y } = useWindowScroll();
+
+  return (
+    <div className={classnames("sticky top-0", { "bg-white border-b border-palette-200": false })}>
+      <NewsHeader />
+      <Navigation mode={false ? "light" : "dark"} />
+    </div>
+  );
+};
 
 const Layout = ({ children }) => {
   // const data = useStaticQuery(graphql`
@@ -40,13 +53,12 @@ const Layout = ({ children }) => {
 
   return (
     <>
-      <NewsHeader />
       <BackgroundImage
         {...background}
         className="bg-palette-600"
         style={{ backgroundPosition: "center top", backgroundSize: "contain" }}
       >
-        <Navigation mode="dark" />
+        <StickyHeader />
         <main>{children}</main>
       </BackgroundImage>
       <FooterNavigation />

packages/website/src/components/Navigation/Navigation.js

@@ -98,7 +98,7 @@ const Navigation = ({ mode }) => {
       >
         <ul className="pt-4 pb-10 space-y-2">
           {routes.map(({ title, route }) => (
-            <li>
+            <li key={title}>
               <Link key={route} to={route} className="text-xl leading-7 font-semibold text-white">
                 {title}
               </Link>