add @material-ui/icons package, make Header more responsive
This commit is contained in:
parent
4b3d42e095
commit
0c29fec2e4
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
Reference in New Issue
Block a user