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

style nav menu

This commit is contained in:
desmukh 2023-01-06 17:33:29 +05:00
parent 23c0c915f3
commit 779747a405
6 changed files with 36 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
gatsby-browser.js
View File

@ -1,2 +1,3 @@
import "@fontsource/karmilla/400.css" import "@fontsource/karmilla/400.css"
import "@fontsource/karmilla/700.css" import "@fontsource/karmilla/700.css"
import "@fontsource/darker-grotesque/600.css"

1
package.json
View File

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.5", "@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5", "@emotion/styled": "^11.10.5",
"@fontsource/darker-grotesque": "^4.5.9",
"@fontsource/karmilla": "^4.5.3", "@fontsource/karmilla": "^4.5.3",
"@mui/icons-material": "^5.11.0", "@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.3", "@mui/material": "^5.11.3",

4
src/components/layout.js
View File

@ -46,9 +46,9 @@ const Layout = ({ location, title, children }) => {
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Container maxWidth="md" sx={{ py: 8 }}> <Container maxWidth="md" sx={{ py: 8 }}>
<Grid container> <Grid container spacing={2}>
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
<NavMenu /> <NavMenu location={location} />
</Grid> </Grid>
<Grid item xs={12} md={9}> <Grid item xs={12} md={9}>
<main>{children}</main> <main>{children}</main>

45
src/components/nav-menu.js
View File

@ -1,31 +1,36 @@
import { List, ListItem, ListItemButton, ListItemText } from "@mui/material" import { Box, Link, Stack } from "@mui/material"
import { Link as GatsbyLink } from "gatsby" import { Link as GatsbyLink } from "gatsby"
import React from "react" import React from "react"
const navMenuItems = [ const navMenuItems = [
{label: "Home", path: "/"}, { label: "Home", path: "/" },
{label: "About", path: "/about"}, { label: "About", path: "/about" },
{label: "Services", path: "/services"}, { label: "Services", path: "/services" },
{label: "Our work", path: "/work"}, { label: "Our work", path: "/work" },
{label: "Handbook", path: "/handbook"}, { label: "Handbook", path: "/handbook" },
{label: "Blog", path: "/blog"}, { label: "Blog", path: "/blog" },
] ]
const NavMenu = () => { const NavMenu = ({ location }) => {
return ( return (
<nav> <Box pt={18} component="nav">
<List> <Stack spacing={2} alignItems="flex-end" mr={8}>
{navMenuItems.map(({label, path}) => ( {navMenuItems.map(({ label, path }) => (
<ListItem key={label}> <Link
<ListItemButton component={GatsbyLink} to={path}> component={GatsbyLink}
<ListItemText primary={label} primaryTypographyProps={{align: "right"}} /> to={path}
</ListItemButton> key={label}
</ListItem> color={location.pathname === path ? "secondary.main" : "inherit"}
textTransform="uppercase"
fontFamily={`"Darker Grotesque", sans-serif`}
fontWeight={600}
>
{label}
</Link>
))} ))}
</List> </Stack>
</nav> </Box>
) )
} }
export default NavMenu export default NavMenu

2
src/pages/index.js
View File

@ -140,7 +140,7 @@ export default BlogIndex
* *
* See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/ * See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
*/ */
export const Head = () => <Seo title="All posts" /> export const Head = () => <Seo title="Home" />
export const pageQuery = graphql` export const pageQuery = graphql`
{ {

5
yarn.lock
View File

@ -1183,6 +1183,11 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@fontsource/darker-grotesque@^4.5.9":
version "4.5.9"
resolved "https://registry.yarnpkg.com/@fontsource/darker-grotesque/-/darker-grotesque-4.5.9.tgz#864cae244d5456537ea1b59bd22a67411139ea24"
integrity sha512-B6XeGf0toFs67eQKyTB12zy+aktfnHDE1UT6nTEDYYl0L/wLhbH/Qh1qHSUUhWHF8kxfq+NycLBTGtmRD8s8Hw==
"@fontsource/karmilla@^4.5.3": "@fontsource/karmilla@^4.5.3":
version "4.5.3" version "4.5.3"
resolved "https://registry.yarnpkg.com/@fontsource/karmilla/-/karmilla-4.5.3.tgz#80267f8ccc76e841308e52273b2d5007bfc50377" resolved "https://registry.yarnpkg.com/@fontsource/karmilla/-/karmilla-4.5.3.tgz#80267f8ccc76e841308e52273b2d5007bfc50377"