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:
parent
720cae2346
commit
c4b8e5e539
@ -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",
|
||||
|
@ -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 = {
|
||||
|
@ -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={'/'}>
|
||||
|
Loading…
Reference in New Issue
Block a user