update layout

This commit is contained in:
desmukh 2023-01-05 15:35:42 +05:00
parent d39c88f21b
commit 51cd50dcc3

View File

@ -1,35 +1,54 @@
import * as React from "react" import * as React from "react"
import { Link } from "gatsby" import { Link as GatsbyLink } from "gatsby"
import { AppBar, Button, Container, Link, Toolbar } from "@mui/material"
const Layout = ({ location, title, children }) => { const Layout = ({ location, title, children }) => {
const rootPath = `${__PATH_PREFIX__}/` // const rootPath = `${__PATH_PREFIX__}/`
const isRootPath = location.pathname === rootPath // const isRootPath = location.pathname === rootPath
let header // let header
if (isRootPath) { // if (isRootPath) {
header = ( // header = (
<h1 className="main-heading"> // <h1 className="main-heading">
<Link to="/">{title}</Link> // <Link to="/">{title}</Link>
</h1> // </h1>
) // )
} else { // } else {
header = ( // header = (
<Link className="header-link-home" to="/"> // <Link className="header-link-home" to="/">
{title} // {title}
</Link> // </Link>
) // )
} // }
return ( return (
<div className="global-wrapper" data-is-root-path={isRootPath}> <>
<header className="global-header">{header}</header> <AppBar
component="header"
color="transparent"
position="relative"
elevation={0}
>
<Toolbar>
<Link
underline="hover"
component={GatsbyLink}
to="/"
sx={{ textTransform: "lowercase" }}
>
{title}
</Link>
</Toolbar>
</AppBar>
<Container>
<main>{children}</main> <main>{children}</main>
<footer> <footer>
© {new Date().getFullYear()}, Built with © {new Date().getFullYear()}, Built with
{` `} {` `}
<a href="https://www.gatsbyjs.com">Gatsby</a> <a href="https://www.gatsbyjs.com">Gatsby</a>
</footer> </footer>
</div> </Container>
</>
) )
} }