feat(header): add links to other pages in header (#10)

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@material-ui/core": "latest",
+    "@material-ui/icons": "^4.9.1",
     "@material-ui/styles": "latest",
     "deepmerge": "^4.2.2",
     "gatsby": "latest",

src/layout/header.tsx

@@ -1,7 +1,10 @@
 import { Link as GatsbyLink } from 'gatsby'
 import React, { FC } from 'react'
-import { AppBar, Toolbar, Typography, Link, Button } from '@material-ui/core'
+import { AppBar, Toolbar, Link, Button } from '@material-ui/core'
 import { makeStyles } from '@material-ui/styles'
+import Brightness7Icon from '@material-ui/icons/Brightness7'
+import Brightness4Icon from '@material-ui/icons/Brightness4'
+import Box from '@material-ui/core/Box'
 
 const useStyles = makeStyles({
   toolbar: {},
@@ -14,29 +17,40 @@ const useStyles = makeStyles({
 })
 
 export interface HeaderProps {
-  siteTitle?: string
   theme: 'light' | 'dark'
   onToggleTheme: () => void
 }
 
-const Header: FC<HeaderProps> = ({ siteTitle = '', onToggleTheme }) => {
+const Header: FC<HeaderProps> = ({ onToggleTheme, theme }) => {
   const classes = useStyles()
 
   return (
-    <AppBar component="header" position="static">
+    <AppBar component="header" position="static" color="default">
       <Toolbar className={classes.toolbar}>
-        <Typography variant="h6" className={classes.title}>
-          <Link
-            to="/"
-            component={GatsbyLink}
-            color="inherit"
-            className={classes.link}
-          >
-            {siteTitle}
-          </Link>
-        </Typography>
+        <Link
+          to="/"
+          component={GatsbyLink}
+          color="inherit"
+          className={classes.link}
+        >
+          <img src="images/logo.png" alt="Logo" width="50" />
+        </Link>
+        <Box flex={1} />
+        <Button color="inherit" component={GatsbyLink} to="/downloads">
+          Téléchargements
+        </Button>
+        <Button color="inherit" component={GatsbyLink} to="/faq">
+          FAQ
+        </Button>
+        <Button color="inherit" component={GatsbyLink} to="/about">
+          A propos
+        </Button>
+        <Button color="inherit" component={GatsbyLink} to="/contact">
+          Contact
+        </Button>
+        <Box flex={1} />
         <Button color="inherit" onClick={onToggleTheme}>
-          Dark mode
+          {theme === 'light' ? <Brightness4Icon /> : <Brightness7Icon />}
         </Button>
       </Toolbar>
     </AppBar>

src/pages/about.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+import SEO from '../components/seo'
+import Layout from '../layout'
+
+const Downloads: FC = () => {
+  return (
+    <Layout>
+      <SEO title="FAQ" />
+      <span>A propos</span>
+    </Layout>
+  )
+}
+
+export default Downloads

src/pages/contact.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+import SEO from '../components/seo'
+import Layout from '../layout'
+
+const Downloads: FC = () => {
+  return (
+    <Layout>
+      <SEO title="FAQ" />
+      <span>Contact</span>
+    </Layout>
+  )
+}
+
+export default Downloads

src/pages/downloads.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+import SEO from '../components/seo'
+import Layout from '../layout'
+
+const Downloads: FC = () => {
+  return (
+    <Layout>
+      <SEO title="FAQ" />
+      <span>Téléchargements</span>
+    </Layout>
+  )
+}
+
+export default Downloads

src/pages/faq.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react'
+import SEO from '../components/seo'
+import Layout from '../layout'
+
+const Downloads: FC = () => {
+  return (
+    <Layout>
+      <SEO title="FAQ" />
+      <span>FAQ</span>
+    </Layout>
+  )
+}
+
+export default Downloads

yarn.lock

@@ -1178,6 +1178,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", "@material-ui/styles@latest":
   version "4.10.0"
   resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"