Menu.tsx

import React from 'react'
import routes from '../../constants/routes.json'
import logo from '../../assets/icons/ecolyo-logo.svg'

import './menu.scss'
import { NavLink, Router, useHistory } from 'react-router-dom'
const Menu: React.FC = () => {
  // TODO class is-active if link is activated

  const history = useHistory()
  return (
    <nav className="menu">
      <div className="logo-container">
        <img src={logo} alt="Ecolyo logo" className="logo" />
      </div>
      <div className="menu-list">
        {routes.map((route: any, index: number) => {
          return (
            <NavLink key={index} to={route.path} activeClassName="active">
              {route.label}
            </NavLink>
          )
        })}
      </div>
      <div className="administration">
        <NavLink to="/login" activeClassName="active">
          Login
        </NavLink>
        <NavLink to="/login" activeClassName="active">
          Signup
        </NavLink>
      </div>
    </nav>
  )
}

export default Menu