add initial version of Header

package.json

@@ -10,6 +10,7 @@
     "@material-ui/styles": "^4.10.0",
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-transform-imports": "^2.0.0",
+    "classnames": "^2.2.6",
     "gatsby": "^2.23.12",
     "gatsby-image": "^2.4.9",
     "gatsby-plugin-manifest": "^2.4.14",

src/components/Layout/Header.js

@@ -0,0 +1,147 @@
+import React, { useState } from "react"
+import classnames from "classnames"
+import * as routes from "@config/routes"
+import logo from "@images/logo.svg"
+
+import { makeStyles } from "@material-ui/core/styles"
+import {
+  AppBar,
+  Toolbar,
+  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(theme => ({
+  appBar: {
+    backgroundColor: "transparent",
+    color: "#fff",
+    boxShadow: "none",
+  },
+  hidden: {
+    "& > *:not(:last-child)": {
+      marginRight: theme.spacing(1.5),
+    },
+  },
+  logo: {
+    width: "56px",
+    height: "auto",
+    [theme.breakpoints.down("xs")]: {
+      width: "48px",
+    },
+  },
+  divider: {
+    flexGrow: 1,
+  },
+  link: {
+    width: "100%",
+  },
+  titleContainer: {
+    display: "flex",
+    alignItems: "center",
+    "& > *:not(:last-child)": {
+      marginRight: theme.spacing(1),
+    },
+  },
+  toolbar: {
+    padding: theme.spacing(2, 0),
+    fontSize: "1.25rem",
+  },
+}))
+
+function Header({ className, ...rest }) {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const classes = useStyles()
+  const open = Boolean(anchorEl)
+
+  const handleMenuOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleMenuClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <AppBar
+      component="nav"
+      position="static"
+      {...rest}
+      className={classnames(classes.appBar, className)}
+    >
+      <Container>
+        <Toolbar className={classes.toolbar} disableGutters>
+          <div className={classes.titleContainer}>
+            <Link title="Strona główna" color="inherit" to={routes.HOME}>
+              <img className={classes.logo} src={logo} alt="logo" />
+            </Link>
+          </div>
+          <div className={classes.divider} />
+          <div>
+            <Hidden implementation="css" xsDown className={classes.hidden}>
+              <Link title="Strona główna" color="inherit" to={routes.HOME}>
+                Strona główna
+              </Link>
+              <Link title="Projekty" color="inherit" to={routes.PROJECTS}>
+                Projekty
+              </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="Strona główna"
+                    color="inherit"
+                    underline="none"
+                    className={classes.link}
+                    to={routes.HOME}
+                  >
+                    Strona główna
+                  </Link>
+                </MenuItem>
+                <MenuItem>
+                  <Link
+                    title="Projekty"
+                    color="inherit"
+                    underline="none"
+                    className={classes.link}
+                    to={routes.PROJECTS}
+                  >
+                    Projekty
+                  </Link>
+                </MenuItem>
+              </Menu>
+            </Hidden>
+          </div>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  )
+}
+
+export default Header

src/components/Layout/Layout.js

@@ -1,17 +1,43 @@
 import React, { Fragment } from "react"
 import PropTypes from "prop-types"
+import classnames from "classnames"
 
+import { makeStyles } from "@material-ui/core/styles"
 import { CssBaseline } from "@material-ui/core"
+import Header from "./Header"
+
+const useStyles = makeStyles(theme => ({
+  main: {
+    display: "flex",
+  },
+  contentWrapper: {
+    width: "100%",
+    minHeight: "calc(100vh - 200px)",
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(3),
+  },
+}))
+
+const Layout = ({ children, className, headerProps }) => {
+  const classes = useStyles()
 
-const Layout = ({ children }) => {
   return (
     <Fragment>
-      <main>{children}</main>
+      <Header {...headerProps} />
+      <main className={classes.main}>
+        <div className={classnames(className, classes.contentWrapper)}>
+          {children}
+        </div>
+      </main>
       <CssBaseline />
     </Fragment>
   )
 }
 
+Layout.defaultProps = {
+  headerProps: {},
+}
+
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
 }

src/config/routes.js

@@ -0,0 +1,2 @@
+export const HOME = "/"
+export const PROJECTS = "/"

src/features/HomePage/HomePage.js

@@ -0,0 +1,25 @@
+import React from "react"
+
+import { makeStyles } from "@material-ui/core/styles"
+import Layout from "@components/Layout/Layout"
+import SEO from "@components/SEO"
+import Header from "./components/Header"
+
+const useStyles = makeStyles(theme => ({
+  layout: {
+    padding: 0,
+    minHeight: `100vh`,
+  },
+}))
+
+const HomePage = ({ location }) => {
+  const classes = useStyles()
+  return (
+    <Layout className={classes.layout} headerProps={{ position: "absolute" }}>
+      <SEO title="Strona główna" pathname={location.pathname} />
+      <Header />
+    </Layout>
+  )
+}
+
+export default HomePage

src/features/HomePage/components/Header.js

@@ -0,0 +1,59 @@
+import React from "react"
+
+import { makeStyles } from "@material-ui/core/styles"
+import { Container, Typography, Button } from "@material-ui/core"
+import bg from "./header-bg.jpg"
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    backgroundImage: `url(${bg})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    clipPath: "polygon(0 0,100% 0,100% 88%,0 100%)",
+
+    height: "100%",
+    [theme.breakpoints.down("xs")]: {
+      margin: 0,
+      clipPath: "none",
+    },
+  },
+  container: {
+    textAlign: "center",
+    height: "100%",
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
+  },
+  textContainer: {
+    paddingTop: theme.spacing(10),
+    paddingBottom: theme.spacing(5),
+  },
+}))
+
+function Header() {
+  const classes = useStyles()
+  return (
+    <header className={classes.header}>
+      <Container className={classes.container}>
+        <div>
+          <div className={classes.textContainer}>
+            <Typography gutterBottom variant="h1">
+              Full Stack Web Developer
+            </Typography>
+            <Typography variant="h3">
+              Tworzę aplikacje i strony internetowe.
+            </Typography>
+            <Typography gutterBottom variant="h3">
+              Masz projekt, pomysł lub problem, który chcesz ze mną omówić?
+            </Typography>
+          </div>
+          <Button variant="outlined" size="large">
+            <Typography variant="h4">Skontaktuj się</Typography>
+          </Button>
+        </div>
+      </Container>
+    </header>
+  )
+}
+
+export default Header

src/pages/index.js

@@ -1,13 +1,7 @@
 import React from "react"
 
-import Layout from "@components/Layout/Layout"
-import SEO from "@components/SEO"
+import HomePage from "@features/HomePage/HomePage"
 
-const IndexPage = () => (
-  <Layout>
-    <SEO title="Strona główna" />
-    asd
-  </Layout>
-)
+const IndexPage = props => <HomePage {...props} />
 
 export default IndexPage

yarn.lock

@@ -3435,6 +3435,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
+
 clean-css@^4.2.1:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"