add nav menu

This commit is contained in:
desmukh 2023-01-05 15:54:28 +05:00
parent 51cd50dcc3
commit 1fa18b6fa2
2 changed files with 41 additions and 2 deletions

View File

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

View File

@ -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