layout: hide nav menu and display hamburger

src/components/layout.js

@@ -1,10 +1,11 @@
 import * as React from "react"
 import { Link as GatsbyLink } from "gatsby"
-import { AppBar, Box, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
+import { AppBar, Box, Container, CssBaseline, Grid, IconButton, Link, ThemeProvider, Toolbar } from "@mui/material"
 import NavMenu from "./nav-menu"
 import theme from "./theme"
 import Footer from "./footer"
 import flower from "../images/flower.png"
+import MenuIcon from "@mui/icons-material/Menu"
 
 const Layout = ({ location, title, children, noHeader }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
@@ -29,14 +30,16 @@ const Layout = ({ location, title, children, noHeader }) => {
     <>
       <ThemeProvider theme={theme}>
         <CssBaseline />
-        {!noHeader && (
-          <AppBar
-            component="header"
-            color="transparent"
-            position="relative"
-            elevation={0}
+        <AppBar
+          component="header"
+          color="transparent"
+          position="relative"
+          elevation={0}
+        >
+          <Toolbar
+            sx={{ justifyContent: noHeader ? "flex-end" : "space-between" }}
           >
-            <Toolbar>
+            {!noHeader && (
               <Link
                 underline="hover"
                 component={GatsbyLink}
@@ -45,13 +48,21 @@ const Layout = ({ location, title, children, noHeader }) => {
               >
                 {title}
               </Link>
-            </Toolbar>
-          </AppBar>
-        )}
+            )}
+            <IconButton
+              color="primary"
+              sx={{ display: { xs: "inline-flex", md: "none" } }}
+            >
+              <MenuIcon />
+            </IconButton>
+          </Toolbar>
+        </AppBar>
         <Container maxWidth="lg" sx={{ py: 8 }}>
           <Grid container spacing={2}>
-            <Grid item xs={12} md={2}>
-              <NavMenu location={location} />
+            <Grid item xs={false} md={2}>
+              <Box display={{ xs: "none", md: "block" }}>
+                <NavMenu location={location} />
+              </Box>
             </Grid>
             <Grid item xs={12} md={6}>
               <main>{children}</main>