fahad/autonomic-zone-gatsby
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout: hide nav menu and display hamburger

Browse Source
This commit is contained in:
desmukh 2023-01-09 00:34:10 +05:00
parent 589aec3c43
commit 5dd356f4db
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/layout.js
View File

@ -1,10 +1,11 @@
import * as React from "react" import * as React from "react"
import { Link as GatsbyLink } from "gatsby" import { Link as GatsbyLink } from "gatsby"
import { AppBar, Box, Container, CssBaseline, Grid, Link, ThemeProvider, Toolbar } from "@mui/material" import { AppBar, Box, Container, CssBaseline, Grid, IconButton, Link, ThemeProvider, Toolbar } from "@mui/material"
import NavMenu from "./nav-menu" import NavMenu from "./nav-menu"
import theme from "./theme" import theme from "./theme"
import Footer from "./footer" import Footer from "./footer"
import flower from "../images/flower.png" import flower from "../images/flower.png"
import MenuIcon from "@mui/icons-material/Menu"
const Layout = ({ location, title, children, noHeader }) => { const Layout = ({ location, title, children, noHeader }) => {
// const rootPath = `${__PATH_PREFIX__}/` // const rootPath = `${__PATH_PREFIX__}/`
@ -29,14 +30,16 @@ const Layout = ({ location, title, children, noHeader }) => {
<> <>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<CssBaseline /> <CssBaseline />
{!noHeader && ( <AppBar
<AppBar component="header"
component="header" color="transparent"
color="transparent" position="relative"
position="relative" elevation={0}
elevation={0} >
<Toolbar
sx={{ justifyContent: noHeader ? "flex-end" : "space-between" }}
> >
<Toolbar> {!noHeader && (
<Link <Link
underline="hover" underline="hover"
component={GatsbyLink} component={GatsbyLink}
@ -45,13 +48,21 @@ const Layout = ({ location, title, children, noHeader }) => {
> >
{title} {title}
</Link> </Link>
</Toolbar> )}
</AppBar> <IconButton
)} color="primary"
sx={{ display: { xs: "inline-flex", md: "none" } }}
>
<MenuIcon />
</IconButton>
</Toolbar>
</AppBar>
<Container maxWidth="lg" sx={{ py: 8 }}> <Container maxWidth="lg" sx={{ py: 8 }}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12} md={2}> <Grid item xs={false} md={2}>
<NavMenu location={location} /> <Box display={{ xs: "none", md: "block" }}>
<NavMenu location={location} />
</Box>
</Grid> </Grid>
<Grid item xs={12} md={6}> <Grid item xs={12} md={6}>
<main>{children}</main> <main>{children}</main>