Skip to content

Commit d516748

Browse files
tophemantopheman
committed
feat(material-ui): setup Header
1 parent 783b566 commit d516748

File tree

10 files changed

+612
-36
lines changed

10 files changed

+612
-36
lines changed

‎package-lock.json

+371
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
"axios": "^0.18.0",
77
"axios-cache-adapter": "^2.0.0",
88
"invariant": "^2.2.3",
9+
"material-ui": "^1.0.0-beta.37",
10+
"material-ui-icons": "^1.0.0-beta.36",
911
"prop-types": "^15.6.1",
1012
"react": "^16.2.0",
1113
"react-dom": "^16.2.0",

‎public/index.html

+22-18
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6-
<meta name="theme-color" content="#000000">
7-
<!--
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
<meta name="theme-color" content="#000000">
8+
<!--
89
manifest.json provides metadata used when your web app is added to the
910
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
1011
-->
11-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13-
<!--
12+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
13+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
14+
<!--
1415
Notice the use of %PUBLIC_URL% in the tags above.
1516
It will be replaced with the URL of the `public` folder during the build.
1617
Only files inside the `public` folder can be referenced from the HTML.
@@ -19,14 +20,16 @@
1920
work correctly both with client-side routing and a non-root public URL.
2021
Learn how to configure a non-root public URL by running `npm run build`.
2122
-->
22-
<title>React App</title>
23-
</head>
24-
<body>
25-
<noscript>
26-
You need to enable JavaScript to run this app.
27-
</noscript>
28-
<div id="root"></div>
29-
<!--
23+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
24+
<title>React App</title>
25+
</head>
26+
27+
<body>
28+
<noscript>
29+
You need to enable JavaScript to run this app.
30+
</noscript>
31+
<div id="root"></div>
32+
<!--
3033
This HTML file is a template.
3134
If you open it directly in the browser, you will see an empty page.
3235
@@ -36,5 +39,6 @@
3639
To begin the development, run `npm start` or `yarn start`.
3740
To create a production bundle, use `npm run build` or `yarn build`.
3841
-->
39-
</body>
40-
</html>
42+
</body>
43+
44+
</html>

‎src/assets/images/github-retina-white.png

2.74 KB
Loading

‎src/assets/images/github-retina.png

3.53 KB
Loading

‎src/assets/images/twitter-retina-white.png

1.34 KB
Loading

‎src/assets/images/twitter-retina.png

2.2 KB
Loading

‎src/components/Header/Header.css

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/** github logo from my other sites**/
2+
/** networks header */
3+
.site-networks {
4+
position: absolute;
5+
right: 20px;
6+
top: 16px;
7+
margin: 0;
8+
padding: 0;
9+
}
10+
ul.site-networks {
11+
list-style: none;
12+
text-align: center;
13+
padding: 0px 0px 10px 0px;
14+
}
15+
ul.site-networks li {
16+
position: relative;
17+
display: inline-block;
18+
vertical-align: middle;
19+
margin-left: 15px;
20+
}
21+
ul.site-networks li a {
22+
display: block;
23+
width: 32px;
24+
height: 32px;
25+
text-decoration: none;
26+
padding-top: 0px;
27+
-webkit-transition: all 0.5s;
28+
-moz-transition: all 0.5s;
29+
-ms-transition: all 0.5s;
30+
-o-transition: all 0.5s;
31+
transition: all 0.5s;
32+
}
33+
ul.site-networks li a span.icon {
34+
position: absolute;
35+
display: block;
36+
width: 32px;
37+
height: 32px;
38+
-webkit-transition: all 0.5s;
39+
-moz-transition: all 0.5s;
40+
-ms-transition: all 0.5s;
41+
-o-transition: all 0.5s;
42+
transition: all 0.5s;
43+
}
44+
ul.site-networks li a span.desc {
45+
display: none;
46+
}
47+
ul.site-networks li a:hover {
48+
}
49+
ul.site-networks li a:hover span.icon {
50+
left: 0px;
51+
-webkit-transform: rotate(360deg);
52+
-moz-transform: rotate(360deg);
53+
-ms-transform: rotate(360deg);
54+
-o-transform: rotate(360deg);
55+
transform: rotate(360deg);
56+
}
57+
/** since logos are included with the css in base64, we don't bother about pixel ratio media query (everybody gets the retina version)*/
58+
ul.site-networks li.twitter a span.icon {
59+
background-image: url(../../assets/images/twitter-retina-white.png);
60+
background-size: 32px 32px;
61+
}
62+
ul.site-networks li.github a span.icon {
63+
background-image: url(../../assets/images/github-retina-white.png);
64+
background-size: 32px 32px;
65+
}
66+
/** for small devices */
67+
@media only screen and (max-width: 600px) {
68+
ul.site-networks {
69+
top: 12px;
70+
}
71+
} /** for extra-small devices */
72+
@media only screen and (max-width: 500px) {
73+
ul.site-networks li {
74+
margin-left: 5px;
75+
}
76+
}

‎src/components/Header/Header.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
// inspired by https://material-ui-next.com/demos/app-bar/#app-bar-with-buttons
2+
3+
import React from "react";
4+
import PropTypes from "prop-types";
5+
import { withStyles } from "material-ui/styles";
6+
import AppBar from "material-ui/AppBar";
7+
import Toolbar from "material-ui/Toolbar";
8+
import Typography from "material-ui/Typography";
9+
import IconButton from "material-ui/IconButton";
10+
import MenuIcon from "material-ui-icons/Menu";
11+
12+
import { Link } from "react-router-dom";
13+
14+
import "./Header.css";
15+
16+
const styles = theme => ({
17+
root: {
18+
flexGrow: 1
19+
},
20+
title: {
21+
textDecoration: "none",
22+
fontWeight: 500,
23+
flex: 1,
24+
[theme.breakpoints.down("sm")]: {
25+
fontSize: "100%"
26+
},
27+
[theme.breakpoints.up("sm")]: {
28+
fontSize: "130%"
29+
}
30+
},
31+
menuButton: {
32+
marginLeft: -12,
33+
[theme.breakpoints.down("sm")]: {
34+
marginRight: 0
35+
},
36+
[theme.breakpoints.up("sm")]: {
37+
marginRight: 20
38+
}
39+
}
40+
});
41+
42+
const Header = props => {
43+
const { classes } = props;
44+
return (
45+
<header className={classes.root}>
46+
<AppBar position="fixed">
47+
<Toolbar>
48+
<IconButton
49+
className={classes.menuButton}
50+
color="inherit"
51+
aria-label="Menu"
52+
>
53+
<MenuIcon />
54+
</IconButton>
55+
<Typography
56+
component={Link}
57+
to="/"
58+
title="Home"
59+
color="inherit"
60+
className={classes.title}
61+
>
62+
npm-registry-browser
63+
</Typography>
64+
<ul className="site-networks">
65+
<li className="twitter">
66+
<a
67+
href="https://twitter.com/topheman"
68+
title="@topheman on twitter"
69+
>
70+
<span className="icon" />
71+
<span className="desc">Twitter</span>
72+
</a>
73+
</li>
74+
<li className="github">
75+
<a
76+
href="https://github.com/topheman/npm-registry-browser"
77+
title="Fork on github"
78+
>
79+
<span className="icon" />
80+
<span className="desc">Github</span>
81+
</a>
82+
</li>
83+
</ul>
84+
</Toolbar>
85+
</AppBar>
86+
</header>
87+
);
88+
};
89+
90+
Header.propTypes = {
91+
classes: PropTypes.object.isRequired
92+
};
93+
94+
export default withStyles(styles)(Header);

‎src/containers/MainLayout/MainLayout.js

+47-18
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,22 @@ import React from "react";
22
import PropTypes from "prop-types";
33
import { Link } from "react-router-dom";
44

5+
import { MuiThemeProvider, createMuiTheme } from "material-ui/styles";
6+
import Button from "material-ui/Button";
7+
import CssBaseline from "material-ui/CssBaseline";
8+
9+
import Header from "../../components/Header/Header";
10+
11+
const theme = createMuiTheme({
12+
palette: {
13+
primary: {
14+
main: "#900000",
15+
light: "#c8412a"
16+
},
17+
secondary: { main: "#DDDDDD" }
18+
}
19+
});
20+
521
const packages = [
622
"react",
723
"[email protected]",
@@ -10,25 +26,38 @@ const packages = [
1026
];
1127

1228
const MainLayout = ({ children }) => (
13-
<div className="layout">
14-
<header>
15-
<h2>Some header</h2>
16-
<nav>
17-
<ul>
18-
<li>
19-
<Link to="/">Home</Link>
20-
</li>
21-
{packages.map(name => (
22-
<li key={name}>
23-
<Link to={`/package/${name}`}>{name}</Link>
29+
<MuiThemeProvider theme={theme}>
30+
<CssBaseline />
31+
<div className="layout">
32+
<Header />
33+
<div style={{ marginTop: 70 }}>
34+
<h2>Temporary page</h2>
35+
<nav>
36+
<ul>
37+
<li>
38+
<Button color="primary" variant="raised" to="/" component={Link}>
39+
Home
40+
</Button>
2441
</li>
25-
))}
26-
</ul>
27-
</nav>
28-
</header>
29-
{children}
30-
<footer>Some Footer</footer>
31-
</div>
42+
{packages.map(name => (
43+
<li key={name}>
44+
<Button
45+
color="primary"
46+
to={`/package/${name}`}
47+
component={Link}
48+
key={name}
49+
>
50+
{name}
51+
</Button>
52+
</li>
53+
))}
54+
</ul>
55+
</nav>
56+
</div>
57+
{children}
58+
<footer>Some Footer</footer>
59+
</div>
60+
</MuiThemeProvider>
3261
);
3362

3463
MainLayout.propTypes = {

0 commit comments

Comments
 (0)