37 lines
983 B
JavaScript
37 lines
983 B
JavaScript
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
|