technology icon should use webp, remove mobile menu

This commit is contained in:
Dawid Wysokiński 2020-07-14 16:52:25 +02:00
parent 0e1ea686f8
commit 97ca83bbaf
2 changed files with 35 additions and 113 deletions

View File

@ -1,4 +1,4 @@
import React, { useState } from "react"
import React from "react"
import classnames from "classnames"
import * as routes from "@config/routes"
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 { makeStyles } from "@material-ui/core/styles"
import {
AppBar,
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"
import { AppBar, Toolbar, Container, Link } from "@material-ui/core"
import { Link as GatsbyLink } from "gatsby-theme-material-ui"
const useStyles = makeStyles(theme => ({
appBar: {
@ -26,10 +17,15 @@ const useStyles = makeStyles(theme => ({
color: "#fff",
boxShadow: "none",
},
hidden: {
linkContainer: {
"& > *:not(:last-child)": {
marginRight: theme.spacing(1.5),
},
[theme.breakpoints.down("xs")]: {
"& > *:not(:last-child)": {
marginRight: theme.spacing(0.75),
},
},
},
logo: {
width: "56px",
@ -58,18 +54,8 @@ const useStyles = makeStyles(theme => ({
}))
function Navbar({ className, ...rest }) {
const [anchorEl, setAnchorEl] = useState(null)
const classes = useStyles()
const handleLinkClick = useSmoothScroll()
const open = Boolean(anchorEl)
const handleMenuOpen = event => {
setAnchorEl(event.currentTarget)
}
const handleMenuClose = () => {
setAnchorEl(null)
}
return (
<AppBar
@ -86,95 +72,31 @@ function Navbar({ className, ...rest }) {
</GatsbyLink>
</div>
<div className={classes.divider} />
<div>
<Hidden implementation="css" xsDown className={classes.hidden}>
<Link
title="Start"
color="inherit"
href={"#" + HEADER_ID}
onClick={handleLinkClick(HEADER_ID)}
>
Start
</Link>
<Link
title="Projekty"
color="inherit"
href={"#" + PROJECTS_SECTION_ID}
onClick={handleLinkClick(PROJECTS_SECTION_ID)}
>
Projekty
</Link>
<Link
title="Kontakt"
color="inherit"
href={"#" + CONTACT_SECTION_ID}
onClick={handleLinkClick(CONTACT_SECTION_ID)}
>
Kontakt
</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 className={classes.linkContainer}>
<Link
title="Start"
color="inherit"
href={"#" + HEADER_ID}
onClick={handleLinkClick(HEADER_ID)}
>
Start
</Link>
<Link
title="Projekty"
color="inherit"
href={"#" + PROJECTS_SECTION_ID}
onClick={handleLinkClick(PROJECTS_SECTION_ID)}
>
Projekty
</Link>
<Link
title="Kontakt"
color="inherit"
href={"#" + CONTACT_SECTION_ID}
onClick={handleLinkClick(CONTACT_SECTION_ID)}
>
Kontakt
</Link>
</div>
</Toolbar>
</Container>

View File

@ -25,7 +25,7 @@ function AboutMe() {
childImageSharp {
id
fixed(height: 45, quality: 100) {
...GatsbyImageSharpFixed
...GatsbyImageSharpFixed_withWebp
}
}
}