style nav menu

src/components/layout.js

@@ -46,9 +46,9 @@ const Layout = ({ location, title, children }) => {
           </Toolbar>
         </AppBar>
         <Container maxWidth="md" sx={{ py: 8 }}>
-          <Grid container>
+          <Grid container spacing={2}>
             <Grid item xs={12} md={3}>
-              <NavMenu />
+              <NavMenu location={location} />
             </Grid>
             <Grid item xs={12} md={9}>
               <main>{children}</main>

src/components/nav-menu.js

@@ -1,31 +1,36 @@
-import { List, ListItem, ListItemButton, ListItemText } from "@mui/material"
+import { Box, Link, Stack } 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"},
+  { 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 = () => {
+const NavMenu = ({ location }) => {
   return (
-    <nav>
-      <List>
-        {navMenuItems.map(({label, path}) => (
-          <ListItem key={label}>
-            <ListItemButton component={GatsbyLink} to={path}>
-              <ListItemText primary={label} primaryTypographyProps={{align: "right"}} />
-            </ListItemButton>
-          </ListItem>
+    <Box pt={18} component="nav">
+      <Stack spacing={2} alignItems="flex-end" mr={8}>
+        {navMenuItems.map(({ label, path }) => (
+          <Link
+            component={GatsbyLink}
+            to={path}
+            key={label}
+            color={location.pathname === path ? "secondary.main" : "inherit"}
+            textTransform="uppercase"
+            fontFamily={`"Darker Grotesque", sans-serif`}
+            fontWeight={600}
+          >
+            {label}
+          </Link>
         ))}
-      </List>
-    </nav>
-      
+      </Stack>
+    </Box>
   )
 }
 
-export default NavMenu
+export default NavMenu

src/pages/index.js

@@ -140,7 +140,7 @@ export default BlogIndex
  *
  * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
  */
-export const Head = () => <Seo title="All posts" />
+export const Head = () => <Seo title="Home" />
 
 export const pageQuery = graphql`
   {