fix initial header

package.json

@@ -21,9 +21,9 @@
   },
   "dependencies": {
     "file-saver": "^1.3.8",
-    "gatsby": "^2.0.0-beta.111",
+    "gatsby": "^2.0.0-beta.112",
-    "gatsby-image": "^2.0.0-beta.8",
+    "gatsby-image": "^2.0.0-beta.9",
-    "gatsby-plugin-manifest": "^2.0.2-beta.6",
+    "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",

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 }) => {
+class LogoUnit extends PureComponent {
-  const classes = minimal ? styles.minimal : styles.logounit
+  constructor(props) {
+    super(props)
 
-  return (
+    this.state = { minimal: false }
-    <div className={classes}>
+  }
-      <Logo className={styles.logounit__logo} />
+
-      <h1 className={styles.logounit__title}>{meta.title.toLowerCase()}</h1>
+  checkMinimal = () => {
-      <p className={styles.logounit__description}>
+    const { minimal } = this.props
-        <span>{'{ '}</span> {meta.tagline.toLowerCase()} <span>{' }'}</span>
+
-      </p>
+    this.setState({ minimal: minimal })
-    </div>
+  }
-  )
+
+  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 = {

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={'/'}>