From 97ca83bbafa5cb5c81489ac429c8f83fe8c7e780 Mon Sep 17 00:00:00 2001
From: Kichiyaki <xyztojajestem@gmail.com>
Date: Tue, 14 Jul 2020 16:52:25 +0200
Subject: [PATCH] technology icon should use webp, remove mobile menu

---
 src/components/Layout/Navbar.js               | 146 ++++--------------
 .../components/Technologies/Technologies.js   |   2 +-
 2 files changed, 35 insertions(+), 113 deletions(-)

diff --git a/src/components/Layout/Navbar.js b/src/components/Layout/Navbar.js
index 923f4b8..95652a4 100644
--- a/src/components/Layout/Navbar.js
+++ b/src/components/Layout/Navbar.js
@@ -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>
diff --git a/src/features/HomePage/components/Technologies/Technologies.js b/src/features/HomePage/components/Technologies/Technologies.js
index f61049d..197685d 100644
--- a/src/features/HomePage/components/Technologies/Technologies.js
+++ b/src/features/HomePage/components/Technologies/Technologies.js
@@ -25,7 +25,7 @@ function AboutMe() {
             childImageSharp {
               id
               fixed(height: 45, quality: 100) {
-                ...GatsbyImageSharpFixed
+                ...GatsbyImageSharpFixed_withWebp
               }
             }
           }