autonomic-zone-gatsby/src/components/nav-menu.js

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" },
]

const NavMenu = ({ location }) => {
  return (
    <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>
        ))}
      </Stack>
    </Box>
  )
}

export default NavMenu