From 7c228c3f4b8ff980d4f83d2ed011c5914c9ace2c Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Thu, 25 Mar 2021 11:44:52 +0100
Subject: [PATCH] sticky header

---
 packages/website/gatsby-config.js                | 10 +++++++++-
 packages/website/package.json                    |  2 ++
 packages/website/src/components/Layout/Layout.js | 16 ++++++++++++++--
 .../src/components/Navigation/Navigation.js      |  2 +-
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/website/gatsby-config.js b/packages/website/gatsby-config.js
index e41f6d9a..171ccb98 100644
--- a/packages/website/gatsby-config.js
+++ b/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`,
   ],
-}
+};
diff --git a/packages/website/package.json b/packages/website/package.json
index 55866b7b..75e8c802 100644
--- a/packages/website/package.json
+++ b/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": {
diff --git a/packages/website/src/components/Layout/Layout.js b/packages/website/src/components/Layout/Layout.js
index 350253a1..52b3ca13 100644
--- a/packages/website/src/components/Layout/Layout.js
+++ b/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 />
diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js
index d74b1cc9..40db2633 100644
--- a/packages/website/src/components/Navigation/Navigation.js
+++ b/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>