layout: show navmenu in drawer on mobile

src/components/layout.js

@@ -1,11 +1,12 @@
-import * as React from "react"
+import React, { useState } from "react"
 import { Link as GatsbyLink } from "gatsby"
-import { AppBar, Box, Container, CssBaseline, Grid, IconButton, Link, ThemeProvider, Toolbar } from "@mui/material"
+import { AppBar, Box, Container, CssBaseline, Drawer, 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"
+import CloseIcon from "@mui/icons-material/Close"
 
 const Layout = ({ location, title, children, noHeader }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
@@ -26,6 +27,8 @@ const Layout = ({ location, title, children, noHeader }) => {
   //   )
   // }
 
+  const [showDrawer, setShowDrawer] = useState(false)
+
   return (
     <>
       <ThemeProvider theme={theme}>
@@ -52,6 +55,7 @@ const Layout = ({ location, title, children, noHeader }) => {
             <IconButton
               color="primary"
               sx={{ display: { xs: "inline-flex", md: "none" } }}
+              onClick={() => setShowDrawer(!showDrawer)}
             >
               <MenuIcon />
             </IconButton>
@@ -85,6 +89,20 @@ const Layout = ({ location, title, children, noHeader }) => {
           </Grid>
         </Container>
         <Footer />
+        <Drawer
+          anchor="right"
+          open={showDrawer}
+          onClose={() => setShowDrawer(false)}
+        >
+          <Box minWidth={240}>
+            <Box display="flex" justifyContent="flex-end" height={56} pr={2}>
+              <IconButton color="primary" onClick={() => setShowDrawer(false)}>
+                <CloseIcon />
+              </IconButton>
+            </Box>
+            <NavMenu location={location} />
+          </Box>
+        </Drawer>
       </ThemeProvider>
     </>
   )