technology icon should use webp, remove mobile menu
This commit is contained in:
parent
0e1ea686f8
commit
97ca83bbaf
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState } from "react"
|
import React from "react"
|
||||||
import classnames from "classnames"
|
import classnames from "classnames"
|
||||||
import * as routes from "@config/routes"
|
import * as routes from "@config/routes"
|
||||||
import useSmoothScroll from "@libs/useSmoothScroll"
|
import useSmoothScroll from "@libs/useSmoothScroll"
|
||||||
|
@ -8,17 +8,8 @@ import { SECTION_ID as PROJECTS_SECTION_ID } from "@features/HomePage/components
|
||||||
import { SECTION_ID as CONTACT_SECTION_ID } from "@features/HomePage/components/Contact"
|
import { SECTION_ID as CONTACT_SECTION_ID } from "@features/HomePage/components/Contact"
|
||||||
|
|
||||||
import { makeStyles } from "@material-ui/core/styles"
|
import { makeStyles } from "@material-ui/core/styles"
|
||||||
import {
|
import { AppBar, Toolbar, Container, Link } from "@material-ui/core"
|
||||||
AppBar,
|
import { Link as GatsbyLink } from "gatsby-theme-material-ui"
|
||||||
Toolbar,
|
|
||||||
Container,
|
|
||||||
Hidden,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
Link,
|
|
||||||
} from "@material-ui/core"
|
|
||||||
import { Menu as MenuIcon } from "@material-ui/icons"
|
|
||||||
import { Link as GatsbyLink, IconButton } from "gatsby-theme-material-ui"
|
|
||||||
|
|
||||||
const useStyles = makeStyles(theme => ({
|
const useStyles = makeStyles(theme => ({
|
||||||
appBar: {
|
appBar: {
|
||||||
|
@ -26,10 +17,15 @@ const useStyles = makeStyles(theme => ({
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
boxShadow: "none",
|
boxShadow: "none",
|
||||||
},
|
},
|
||||||
hidden: {
|
linkContainer: {
|
||||||
"& > *:not(:last-child)": {
|
"& > *:not(:last-child)": {
|
||||||
marginRight: theme.spacing(1.5),
|
marginRight: theme.spacing(1.5),
|
||||||
},
|
},
|
||||||
|
[theme.breakpoints.down("xs")]: {
|
||||||
|
"& > *:not(:last-child)": {
|
||||||
|
marginRight: theme.spacing(0.75),
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
logo: {
|
logo: {
|
||||||
width: "56px",
|
width: "56px",
|
||||||
|
@ -58,18 +54,8 @@ const useStyles = makeStyles(theme => ({
|
||||||
}))
|
}))
|
||||||
|
|
||||||
function Navbar({ className, ...rest }) {
|
function Navbar({ className, ...rest }) {
|
||||||
const [anchorEl, setAnchorEl] = useState(null)
|
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
const handleLinkClick = useSmoothScroll()
|
const handleLinkClick = useSmoothScroll()
|
||||||
const open = Boolean(anchorEl)
|
|
||||||
|
|
||||||
const handleMenuOpen = event => {
|
|
||||||
setAnchorEl(event.currentTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleMenuClose = () => {
|
|
||||||
setAnchorEl(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppBar
|
<AppBar
|
||||||
|
@ -86,95 +72,31 @@ function Navbar({ className, ...rest }) {
|
||||||
</GatsbyLink>
|
</GatsbyLink>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.divider} />
|
<div className={classes.divider} />
|
||||||
<div>
|
<div className={classes.linkContainer}>
|
||||||
<Hidden implementation="css" xsDown className={classes.hidden}>
|
<Link
|
||||||
<Link
|
title="Start"
|
||||||
title="Start"
|
color="inherit"
|
||||||
color="inherit"
|
href={"#" + HEADER_ID}
|
||||||
href={"#" + HEADER_ID}
|
onClick={handleLinkClick(HEADER_ID)}
|
||||||
onClick={handleLinkClick(HEADER_ID)}
|
>
|
||||||
>
|
Start
|
||||||
Start
|
</Link>
|
||||||
</Link>
|
<Link
|
||||||
<Link
|
title="Projekty"
|
||||||
title="Projekty"
|
color="inherit"
|
||||||
color="inherit"
|
href={"#" + PROJECTS_SECTION_ID}
|
||||||
href={"#" + PROJECTS_SECTION_ID}
|
onClick={handleLinkClick(PROJECTS_SECTION_ID)}
|
||||||
onClick={handleLinkClick(PROJECTS_SECTION_ID)}
|
>
|
||||||
>
|
Projekty
|
||||||
Projekty
|
</Link>
|
||||||
</Link>
|
<Link
|
||||||
<Link
|
title="Kontakt"
|
||||||
title="Kontakt"
|
color="inherit"
|
||||||
color="inherit"
|
href={"#" + CONTACT_SECTION_ID}
|
||||||
href={"#" + CONTACT_SECTION_ID}
|
onClick={handleLinkClick(CONTACT_SECTION_ID)}
|
||||||
onClick={handleLinkClick(CONTACT_SECTION_ID)}
|
>
|
||||||
>
|
Kontakt
|
||||||
Kontakt
|
</Link>
|
||||||
</Link>
|
|
||||||
</Hidden>
|
|
||||||
<Hidden implementation="css" smUp>
|
|
||||||
<IconButton
|
|
||||||
edge="start"
|
|
||||||
color="inherit"
|
|
||||||
aria-label="menu"
|
|
||||||
onClick={handleMenuOpen}
|
|
||||||
>
|
|
||||||
<MenuIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
anchorEl={anchorEl}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: "top",
|
|
||||||
horizontal: "right",
|
|
||||||
}}
|
|
||||||
keepMounted
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: "top",
|
|
||||||
horizontal: "right",
|
|
||||||
}}
|
|
||||||
open={open}
|
|
||||||
onClose={handleMenuClose}
|
|
||||||
disableScrollLock
|
|
||||||
>
|
|
||||||
<MenuItem>
|
|
||||||
<Link
|
|
||||||
title="Start"
|
|
||||||
color="inherit"
|
|
||||||
underline="none"
|
|
||||||
className={classes.link}
|
|
||||||
href={"#" + HEADER_ID}
|
|
||||||
onClick={handleLinkClick(HEADER_ID)}
|
|
||||||
>
|
|
||||||
Start
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem>
|
|
||||||
<Link
|
|
||||||
title="Projekty"
|
|
||||||
color="inherit"
|
|
||||||
underline="none"
|
|
||||||
className={classes.link}
|
|
||||||
href={"#" + PROJECTS_SECTION_ID}
|
|
||||||
onClick={handleLinkClick(PROJECTS_SECTION_ID)}
|
|
||||||
>
|
|
||||||
Projekty
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem>
|
|
||||||
<Link
|
|
||||||
title="Kontakt"
|
|
||||||
color="inherit"
|
|
||||||
underline="none"
|
|
||||||
className={classes.link}
|
|
||||||
href={"#" + CONTACT_SECTION_ID}
|
|
||||||
onClick={handleLinkClick(CONTACT_SECTION_ID)}
|
|
||||||
>
|
|
||||||
Kontakt
|
|
||||||
</Link>
|
|
||||||
</MenuItem>
|
|
||||||
</Menu>
|
|
||||||
</Hidden>
|
|
||||||
</div>
|
</div>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
|
@ -25,7 +25,7 @@ function AboutMe() {
|
||||||
childImageSharp {
|
childImageSharp {
|
||||||
id
|
id
|
||||||
fixed(height: 45, quality: 100) {
|
fixed(height: 45, quality: 100) {
|
||||||
...GatsbyImageSharpFixed
|
...GatsbyImageSharpFixed_withWebp
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue