1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-02-14 21:10:41 +01:00

fix initial header

This commit is contained in:
Matthias Kretschmann 2018-08-21 02:11:54 +02:00
parent 720cae2346
commit c4b8e5e539
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 56 additions and 16 deletions

View File

@ -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",

View File

@ -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 = {

View File

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