components/menu.js

import React from 'react'
import { Collapse } from 'reactstrap';
import Link from 'next/link'
import { Nav } from 'react-bootstrap';
import NProgress from 'nprogress'
import { withTranslation } from '../i18n'
import { badgesColors } from '../utils/colors'
import AnchorLink from 'react-anchor-link-smooth-scroll'

/**
 * Create a menu with personalized content
 * @class Menu
 * 
 * @prop {String} title - Title of page
 * @prop {String} description - Description of the page
 * @prop {String} year - Current year selected
 * @prop {String} baseUrl - Main page to redirect
 * @prop {String} endUrl - Params query for the baseUrl
 * @prop {React.Component} children - Personalized content
 * 
 * @extends React.Component<Props>
 */
class Menu extends React.Component {
  topYear = [
    { value: 2013, label: '2013' },
    { value: 2014, label: '2014' },
    { value: 2015, label: '2015' },
    { value: 2016, label: '2016' },
    { value: 2017, label: '2017' },
    { value: 2018, label: '2018' },
    { value: 2019, label: '2019' }
  ]

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { collapse: false };
  }

  static async getInitialProps({ req }) {
    return {
      namespacesRequired: ['filter']
    }
  }

  toggle() {
    this.setState(state => ({ collapse: !state.collapse }));
  }

  render() {
    return (
      <div className="px-3">
        <div className="row">
          <div className="col-md-auto">
            <div className="title-content">
              <h2>{this.props.title}</h2>
              {this.props.anchors.map(({href, text, name})=>(
                <AnchorLink href={href} style={{ backgroundImage: `${badgesColors[name]}` }} className="badge badge-secondary" >{text}</AnchorLink>
              ))}
            </div>
            <p className="text-muted">{this.props.description}</p>
          </div>
          <div className="col-md-auto ml-auto">
            <button className="btn btn-outline-dark btn-filter" onClick={this.toggle}>
              <i className="fas fa-filter"></i><span className="ml-3">{this.props.t('filter')}</span>
            </button>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <Collapse isOpen={this.state.collapse}>
              <div>
                <div className="row">
                  <div className="col">
                    <Nav className="justify-content-center" defaultActiveKey={this.props.year}>
                      {this.topYear.map(({ value, label }) => (
                        <Nav.Item key={`nav-navitem-${label}`} >
                          <Nav.Link eventKey={`${label}`}
                            onClick={() => NProgress.start()}
                            key={`nav-navitem-link${label}`}
                            disabled={label == this.props.year}
                            href={`/${this.props.baseUrl}/${value}${this.props.endUrl ? `/${this.props.endUrl}` : ''}`}>
                            {label}
                          </Nav.Link>
                        </Nav.Item>
                      ))}
                    </Nav>
                  </div>
                </div>
                {this.props.children}
              </div>

            </Collapse>
          </div>
        </div>
        <style jsx>{`
      
    `}
        </style>
      </div>
    )
  }
}

export default withTranslation('filter')(Menu)