home: hide header

src/components/layout.js

@@ -6,7 +6,7 @@ import theme from "./theme"
 import Footer from "./footer"
 import flower from "../images/flower.png"
 
-const Layout = ({ location, title, children }) => {
+const Layout = ({ location, title, children, noHeader }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
   // const isRootPath = location.pathname === rootPath
   // let header
@@ -29,23 +29,25 @@ const Layout = ({ location, title, children }) => {
     <>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        <AppBar
-          component="header"
-          color="transparent"
-          position="relative"
-          elevation={0}
-        >
-          <Toolbar>
-            <Link
-              underline="hover"
-              component={GatsbyLink}
-              to="/"
-              sx={{ textTransform: "lowercase" }}
-            >
-              {title}
-            </Link>
-          </Toolbar>
-        </AppBar>
+        {!noHeader && (
+          <AppBar
+            component="header"
+            color="transparent"
+            position="relative"
+            elevation={0}
+          >
+            <Toolbar>
+              <Link
+                underline="hover"
+                component={GatsbyLink}
+                to="/"
+                sx={{ textTransform: "lowercase" }}
+              >
+                {title}
+              </Link>
+            </Toolbar>
+          </AppBar>
+        )}
         <Container maxWidth="lg" sx={{ py: 8 }}>
           <Grid container spacing={2}>
             <Grid item xs={12} md={2}>

src/pages/index.js

@@ -41,7 +41,7 @@ const BlogIndex = ({ data, location }) => {
   }
 
   return (
-    <Layout location={location} title={siteTitle}>
+    <Layout location={location} title={siteTitle} noHeader>
       <Box py={4}>
         <Typography
           variant="h1"