src/components/Header/Header.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { Link } from 'gatsby'
import Search from 'src/components/Search'
import styles from './Header.module.scss'
import logo from 'src/img/theheroes_logo.svg'
import SideBar from 'src/components/Sidebar'
import { formatMessage } from 'src/translations'
import { isOnline, removeListeners, getLink } from 'src/utils'
import withLocale from 'src/components/withLocale'

const isPartiallyActive = ({ isPartiallyCurrent }) => {
  return isPartiallyCurrent ? { className: classNames(styles.logo, styles.active) } : null
}

const PartialNavLink = (props) => <Link getProps={isPartiallyActive} {...props} />

class Header extends Component {
  state = { isOnline: true, lang: 'ru', url: '' }

  componentDidMount() {
    isOnline(this)
  }

  componentWillUnmount() {
    removeListeners(this)
  }

  render() {
    const { className, style, full, locale, changeLocale } = this.props

    const news = formatMessage(locale, 'news')
    const interviews = formatMessage(locale, 'interview')
    const videos = formatMessage(locale, 'video')
    const podcasts = formatMessage(locale, 'podcasts')

    const onlineLinks = (
      <>
        <li>
          <PartialNavLink to={getLink(locale, 'videos')}>{videos}</PartialNavLink>
        </li>
        <li>
          <PartialNavLink to={getLink(locale, 'podcasts')}>{podcasts}</PartialNavLink>
        </li>
      </>
    )

    const offineLinks = (
      <>
        <li className={styles.offlineMode}>
          <PartialNavLink to="/videos">{videos}</PartialNavLink>
        </li>
        <li className={styles.offlineMode}>
          <PartialNavLink to="/podcasts">{podcasts}</PartialNavLink>
        </li>
      </>
    )

    return (
      <div className={classNames(styles.wrap, { [styles.full]: full })}>
        <div className={styles.sidebar}>
          <SideBar locale={locale || this.props.locale} />
        </div>
        <header id="header" className={classNames(className, styles.root)}>
          <Link to={getLink(locale)} className={styles.logo}>
            <img src={logo} alt="logo" />
            <figure>BETA</figure>
          </Link>
          <nav className={styles.nav}>
            <ul>
              <li>
                <PartialNavLink to={getLink(locale, 'news')}>{news}</PartialNavLink>
              </li>
              <li>
                <PartialNavLink to={getLink(locale, 'interviews')}>{interviews}</PartialNavLink>
              </li>
              {this.state.isOnline && locale !== 'en' ? onlineLinks : offineLinks}
            </ul>
          </nav>

          <nav className={styles.controls}>
            <ul className={styles.languages}>
              <li>
                <button className={styles.changeLanguage} onClick={changeLocale}>
                  <span className={styles.lang}>{this.props.locale === 'en' ? 'ru' : 'en'}</span>
                </button>
              </li>
            </ul>
            <div className={styles.search}>
              <Search locale={locale || this.props.locale} />
            </div>
          </nav>
        </header>
      </div>
    )
  }
}

Header.propTypes = {
  className: PropTypes.string,
  style: PropTypes.object,
  full: PropTypes.bool,
  locale: PropTypes.string.isRequired,
}

export default withLocale(Header)