112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import React, { useState } from "react"
|
|
import { Link as GatsbyLink } from "gatsby"
|
|
import { AppBar, Box, Container, CssBaseline, Drawer, Grid, IconButton, 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"
|
|
import MenuIcon from "@mui/icons-material/Menu"
|
|
import CloseIcon from "@mui/icons-material/Close"
|
|
|
|
const Layout = ({ location, title, children, noHeader }) => {
|
|
// 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>
|
|
// )
|
|
// }
|
|
|
|
const [showDrawer, setShowDrawer] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<AppBar
|
|
component="header"
|
|
color="transparent"
|
|
position="relative"
|
|
elevation={0}
|
|
>
|
|
<Toolbar
|
|
sx={{ justifyContent: noHeader ? "flex-end" : "space-between" }}
|
|
>
|
|
{!noHeader && (
|
|
<Link
|
|
underline="hover"
|
|
component={GatsbyLink}
|
|
to="/"
|
|
sx={{ textTransform: "lowercase" }}
|
|
>
|
|
{title}
|
|
</Link>
|
|
)}
|
|
<IconButton
|
|
color="primary"
|
|
sx={{ display: { xs: "inline-flex", md: "none" } }}
|
|
onClick={() => setShowDrawer(!showDrawer)}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<Container maxWidth="lg" sx={{ py: 8 }}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={false} md={2}>
|
|
<Box display={{ xs: "none", md: "block" }}>
|
|
<NavMenu location={location} />
|
|
</Box>
|
|
</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 />
|
|
<Drawer
|
|
anchor="right"
|
|
open={showDrawer}
|
|
onClose={() => setShowDrawer(false)}
|
|
>
|
|
<Box minWidth={240}>
|
|
<Box display="flex" justifyContent="flex-end" height={56} pr={2}>
|
|
<IconButton color="primary" onClick={() => setShowDrawer(false)}>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
</Box>
|
|
<NavMenu location={location} />
|
|
</Box>
|
|
</Drawer>
|
|
</ThemeProvider>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default Layout
|