Source: components/footer/Footer.js

import React, { Component } from 'react'
import './Footer.css'
import getTranslation from '../../i18n/'
import { Link } from 'react-router-dom'

/**
 * The footer of the web-portal containing links to the imprint etc.
 */
class Footer extends Component {

    constructor(props) {
        super(props);
        this.state = { buttonVisible: false }
    }

    /**
     * Scroll to the top of the page
     */
    toTop() {
        window.scrollTo(0,0);
    }

    /**
     * Show or hide the "Scroll to top" button, depending on the window position
     */
    toggleButton() {
        let buttonVisible = this.state.buttonVisible

        window.scrollY > 500?
        !buttonVisible && this.setState({buttonVisible:true})
        :
        buttonVisible && this.setState({buttonVisible:false})
    }

    componentDidMount(){
        window.addEventListener('scroll',() => this.toggleButton());
    }

  render() {
      let pages = this.props.pages.filter(page => page.navigation === 'footer')

      pages.map(page => {
        let localized_title = "title_"+this.props.activeLanguage
        page.title_local = page[localized_title]
    })
    return(
      <div className="footer">
      {this.state.buttonVisible &&
          <div className="jump-to-top">
            <button onClick={() => this.toTop()} className="btn btn-blue btn-transparent"><i className="fa fa-arrow-up" aria-hidden="true"></i> {getTranslation("jump.to.top")}</button>
          </div>
      }
        <ul>
            {pages.map(page =>
                <li key={page.id}><Link to={("/content/"+page.url)}>{(this.props.activeLanguage === "en" ? page.title : page.title_local ? page.title_local : page.title)}</Link></li>
            )}
        </ul>
      </div>
    )
  }

}

export default Footer