autonomic-zone-gatsby/src/components/layout.js

64 lines
1.4 KiB
JavaScript

import * as React from "react"
import { Link as GatsbyLink } from "gatsby"
import { AppBar, Container, Grid, Link, Toolbar } from "@mui/material"
import NavMenu from "./nav-menu"
const Layout = ({ location, title, children }) => {
// const rootPath = `${__PATH_PREFIX__}/`
// const isRootPath = location.pathname === rootPath
// let header
// if (isRootPath) {
// header = (
// <h1 className="main-heading">
// <Link to="/">{title}</Link>
// </h1>
// )
// } else {
// header = (
// <Link className="header-link-home" to="/">
// {title}
// </Link>
// )
// }
return (
<>
<AppBar
component="header"
color="transparent"
position="relative"
elevation={0}
>
<Toolbar>
<Link
underline="hover"
component={GatsbyLink}
to="/"
sx={{ textTransform: "lowercase" }}
>
{title}
</Link>
</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
{` `}
<a href="https://www.gatsbyjs.com">Gatsby</a>
</footer>
</Container>
</>
)
}
export default Layout