add nav menu

src/components/layout.js

@@ -1,6 +1,7 @@
 import * as React from "react"
 import { Link as GatsbyLink } from "gatsby"
-import { AppBar, Button, Container, Link, Toolbar } from "@mui/material"
+import { AppBar, Container, Grid, Link, Toolbar } from "@mui/material"
+import NavMenu from "./nav-menu"
 
 const Layout = ({ location, title, children }) => {
   // const rootPath = `${__PATH_PREFIX__}/`
@@ -41,7 +42,14 @@ const Layout = ({ location, title, children }) => {
         </Toolbar>
       </AppBar>
       <Container>
-        <main>{children}</main>
+        <Grid container>
+          <Grid item xs={12} md={2}>
+            <NavMenu />
+          </Grid>
+          <Grid item xs={12} md={10}>
+            <main>{children}</main>
+          </Grid>
+        </Grid>
         <footer>
           © {new Date().getFullYear()}, Built with
           {` `}

src/components/nav-menu.js

@@ -0,0 +1,31 @@
+import { List, ListItem, ListItemButton, ListItemText } from "@mui/material"
+import { Link as GatsbyLink } from "gatsby"
+import React from "react"
+
+const navMenuItems = [
+  {label: "Home", path: "/"},
+  {label: "About", path: "/about"},
+  {label: "Services", path: "/services"},
+  {label: "Our work", path: "/work"},
+  {label: "Handbook", path: "/handbook"},
+  {label: "Blog", path: "/blog"},
+]
+
+const NavMenu = () => {
+  return (
+    <nav>
+      <List>
+        {navMenuItems.map(({label, path}) => (
+          <ListItem key={label}>
+            <ListItemButton component={GatsbyLink} to={path}>
+              <ListItemText primary={label} primaryTypographyProps={{align: "right"}} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </nav>
+      
+  )
+}
+
+export default NavMenu