81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import * as React from "react"
|
|
import { Link as GatsbyLink } from "gatsby"
|
|
import { AppBar, Box, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material"
|
|
import NavMenu from "./nav-menu"
|
|
import theme from "./theme"
|
|
import Footer from "./footer"
|
|
import flower from "../images/flower.png"
|
|
|
|
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 (
|
|
<>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<AppBar
|
|
component="header"
|
|
color="transparent"
|
|
position="relative"
|
|
elevation={0}
|
|
>
|
|
<Toolbar>
|
|
<Link
|
|
underline="hover"
|
|
component={GatsbyLink}
|
|
to="/"
|
|
sx={{ textTransform: "lowercase" }}
|
|
>
|
|
{title}
|
|
</Link>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Container maxWidth="lg" sx={{ py: 8 }}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} md={2}>
|
|
<NavMenu location={location} />
|
|
</Grid>
|
|
<Grid item xs={12} md={6}>
|
|
<main>{children}</main>
|
|
</Grid>
|
|
<Grid item xs={12} md={4}>
|
|
<Box position={"relative"} height="100%" zIndex={-100}>
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
height: "100%",
|
|
width: "100%",
|
|
bottom: -90,
|
|
backgroundImage: `url(${flower})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPositionY: "100%",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
<Footer />
|
|
</ThemeProvider>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Layout
|