style nav menu

gatsby-browser.js

@@ -1,2 +1,3 @@
 import "@fontsource/karmilla/400.css"
 import "@fontsource/karmilla/700.css"
+import "@fontsource/darker-grotesque/600.css"

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
+    "@fontsource/darker-grotesque": "^4.5.9",
     "@fontsource/karmilla": "^4.5.3",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.3",

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,30 +1,35 @@
-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>
   )
 }
 

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`
   {

yarn.lock

@@ -1183,6 +1183,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/darker-grotesque@^4.5.9":
+  version "4.5.9"
+  resolved "https://registry.yarnpkg.com/@fontsource/darker-grotesque/-/darker-grotesque-4.5.9.tgz#864cae244d5456537ea1b59bd22a67411139ea24"
+  integrity sha512-B6XeGf0toFs67eQKyTB12zy+aktfnHDE1UT6nTEDYYl0L/wLhbH/Qh1qHSUUhWHF8kxfq+NycLBTGtmRD8s8Hw==
+
 "@fontsource/karmilla@^4.5.3":
   version "4.5.3"
   resolved "https://registry.yarnpkg.com/@fontsource/karmilla/-/karmilla-4.5.3.tgz#80267f8ccc76e841308e52273b2d5007bfc50377"