add @material-ui/icons package, make Header more responsive

package.json

@@ -6,6 +6,7 @@
   "author": "Dawid Wysokiński <xyztojajestem@gmail.com>",
   "dependencies": {
     "@material-ui/core": "^4.10.2",
+    "@material-ui/icons": "^4.9.1",
     "@material-ui/styles": "^4.10.0",
     "gatsby": "^2.23.10",
     "gatsby-image": "^2.4.8",

src/components/Layout/Header.js

@@ -1,7 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
 import { makeStyles } from "@material-ui/core/styles";
-import { AppBar, Toolbar, Typography, Container } from "@material-ui/core";
-import { Link } from "gatsby-theme-material-ui";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  Container,
+  Hidden,
+  Menu,
+  MenuItem,
+} from "@material-ui/core";
+import { Menu as MenuIcon } from "@material-ui/icons";
+import { Link, IconButton } from "gatsby-theme-material-ui";
 
 const useStyles = makeStyles(() => ({
   title: {
@@ -15,8 +24,19 @@ const useStyles = makeStyles(() => ({
 }));
 
 function Header({ title, twhelpUrl }) {
+  const [anchorEl, setAnchorEl] = useState(null);
   const classes = useStyles();
+  const open = Boolean(anchorEl);
   const twhelpText = twhelpUrl.replace("http://", "").replace("https://", "");
+
+  const handleMenuOpen = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <AppBar position="static" className={classes.appBar}>
       <Container>
@@ -27,9 +47,47 @@ function Header({ title, twhelpUrl }) {
             </Link>
           </Typography>
           <div>
-            <Link title={twhelpText} color="inherit" href={twhelpUrl}>
-              {twhelpText}
-            </Link>
+            <Hidden implementation="css" xsDown>
+              <Link title={twhelpText} color="inherit" href={twhelpUrl}>
+                {twhelpText}
+              </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={twhelpText}
+                    color="inherit"
+                    underline="none"
+                    href={twhelpUrl}
+                  >
+                    {twhelpText}
+                  </Link>
+                </MenuItem>
+              </Menu>
+            </Hidden>
           </div>
         </Toolbar>
       </Container>

yarn.lock

@@ -1612,6 +1612,13 @@
     react-is "^16.8.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/icons@^4.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.9.1.tgz#fdeadf8cb3d89208945b33dbc50c7c616d0bd665"
+  integrity sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+
 "@material-ui/styles@^4.10.0":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"