From c4b8e5e53948728e663e84311b0d7c0c7f2617a3 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 21 Aug 2018 02:11:54 +0200
Subject: [PATCH] fix initial header

---
 package.json                        |  6 ++--
 src/components/atoms/LogoUnit.jsx   | 47 +++++++++++++++++++++--------
 src/components/organisms/Header.jsx | 19 +++++++++++-
 3 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index 79c753a..d7a3b66 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
   },
   "dependencies": {
     "file-saver": "^1.3.8",
-    "gatsby": "^2.0.0-beta.111",
-    "gatsby-image": "^2.0.0-beta.8",
-    "gatsby-plugin-manifest": "^2.0.2-beta.6",
+    "gatsby": "^2.0.0-beta.112",
+    "gatsby-image": "^2.0.0-beta.9",
+    "gatsby-plugin-manifest": "^2.0.2-beta.7",
     "gatsby-plugin-matomo": "^0.5.0",
     "gatsby-plugin-offline": "^2.0.0-beta.9",
     "gatsby-plugin-react-helmet": "^3.0.0-beta.4",
diff --git a/src/components/atoms/LogoUnit.jsx b/src/components/atoms/LogoUnit.jsx
index e7a5ba3..4071c2f 100644
--- a/src/components/atoms/LogoUnit.jsx
+++ b/src/components/atoms/LogoUnit.jsx
@@ -1,20 +1,43 @@
-import React from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Logo from '../svg/Logo'
 import styles from './LogoUnit.module.scss'
 
-const LogoUnit = ({ meta, minimal }) => {
-  const classes = minimal ? styles.minimal : styles.logounit
+class LogoUnit extends PureComponent {
+  constructor(props) {
+    super(props)
 
-  return (
-    <div className={classes}>
-      <Logo className={styles.logounit__logo} />
-      <h1 className={styles.logounit__title}>{meta.title.toLowerCase()}</h1>
-      <p className={styles.logounit__description}>
-        <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
-      </p>
-    </div>
-  )
+    this.state = { minimal: false }
+  }
+
+  checkMinimal = () => {
+    const { minimal } = this.props
+
+    this.setState({ minimal: minimal })
+  }
+
+  componentDidMount() {
+    this.checkMinimal()
+  }
+
+  componentDidUpdate() {
+    this.checkMinimal()
+  }
+
+  render() {
+    const { meta } = this.props
+    const { minimal } = this.state
+
+    return (
+      <div className={minimal ? styles.minimal : styles.logounit}>
+        <Logo className={styles.logounit__logo} />
+        <h1 className={styles.logounit__title}>{meta.title.toLowerCase()}</h1>
+        <p className={styles.logounit__description}>
+          <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
+        </p>
+      </div>
+    )
+  }
 }
 
 LogoUnit.propTypes = {
diff --git a/src/components/organisms/Header.jsx b/src/components/organisms/Header.jsx
index 424db69..3e9ef8b 100644
--- a/src/components/organisms/Header.jsx
+++ b/src/components/organisms/Header.jsx
@@ -10,13 +10,30 @@ import styles from './Header.module.scss'
 class Header extends PureComponent {
   constructor(props) {
     super(props)
+
+    this.state = { minimal: false }
+  }
+
+  checkMinimal = () => {
+    const { isHomepage } = this.props
+
+    this.setState({ minimal: !isHomepage })
+  }
+
+  componentDidMount() {
+    this.checkMinimal()
+  }
+
+  componentDidUpdate() {
+    this.checkMinimal()
   }
 
   render() {
     const { isHomepage, meta } = this.props
+    const { minimal } = this.state
 
     return (
-      <header className={isHomepage ? styles.header : styles.minimal}>
+      <header className={minimal ? styles.minimal : styles.header}>
         <ThemeSwitch />
 
         <Link className={styles.header__link} to={'/'}>