Add sticky header (#133)

src/components/Header.tsx

@@ -15,18 +15,28 @@ import { FaGithub } from "react-icons/fa";
 import { AddIcon } from "@chakra-ui/icons";
 import { Filters } from "./Filters";
 
-export const Header = () => {
+export const Header = ({ showSearch = true, showFilters = true }) => {
   const { handleConnect, isConnected, address } = useContext(Web3Context);
   return (
     <Flex
-      pb="2"
+      as="header"
+      flexShrink="0"
+      py="3"
+      px="8"
       flexDirection={{ base: "column", md: "row" }}
       justifyContent="space-between"
+      backdropFilter="auto"
+      backdropBlur="1.25rem"
+      position="fixed"
+      top="0"
+      left="0"
+      width="100%"
+      zIndex="sticky"
     >
       <Heading>Chainlist</Heading>
-      <Search />
+      {showSearch && <Search />}
       <Flex>
-        <Filters />
+        {showFilters && <Filters />}
         <Tooltip label="Add Network">
           <Link
             href="https://github.com/ethereum-lists/chains/pulls"

src/components/Layout.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Flex } from "@chakra-ui/react";
+import { Header } from "./Header";
+
+export const Layout = ({ children, headerProps = {} }) => (
+  <Flex flexDirection="column" py="4" px="8" height="100vh" position="relative">
+    <Header {...headerProps} />
+    <Flex as="main" flexDirection="column" mt={{ base: "164px", md: "16" }}>
+      {children}
+    </Flex>
+  </Flex>
+);

src/pages/index.tsx

@@ -1,11 +1,10 @@
-import { Box } from "@chakra-ui/react";
 import { graphql, useStaticQuery } from "gatsby";
-import React, { useState } from "react";
+import React from "react";
 import { ChainList } from "../components/ChainList";
-import { Header } from "../components/Header";
 import { Seo } from "../components/SEO";
 import { Web3Provider } from "../context/Web3Context";
 import { SearchProvider } from "../context/SearchContext";
+import { Layout } from "../components/Layout";
 
 const IndexPage = () => {
   const rawData = useStaticQuery(graphql`
@@ -79,10 +78,9 @@ const IndexPage = () => {
       <Seo />
       <Web3Provider>
         <SearchProvider>
-          <Box py="4" px="8">
-            <Header />
+          <Layout>
             <ChainList chains={chains} />
-          </Box>
+          </Layout>
         </SearchProvider>
       </Web3Provider>
     </>