Navbar.tsx

import React, { useState } from 'react'
import { NavLink } from 'react-router-dom'
import routes from '../../constants/routes.json'
import burger from '../../assets/icons/menu.svg'
import logo from '../../assets/icons/ecolyo-logo.svg'
import login from '../../assets/icons/login.svg'
import editing from '../../assets/icons/editing.svg'
import settings from '../../assets/icons/settings.svg'

import './navbar.scss'

const Navbar: React.FC = () => {
  const [isLogged] = useState<boolean>(false)
  return (
    <div className="navbar">
      <img src={logo} alt="Ecolyo logo" className="logo" />

      <div className="menu-list">
        <NavLink to={'/editing'} activeClassName="active">
          <img src={editing} className="navbar-icon" alt="Editing icon" />
          Edition
        </NavLink>
        <NavLink to={'/settings'} activeClassName="active">
          <img src={settings} className="navbar-icon" alt="Settings icon" />
          Paramètres
        </NavLink>
        <NavLink to="/login" activeClassName="active">
          <img src={login} className="navbar-icon" alt="Login icon" />
          Login
        </NavLink>
      </div>
    </div>
  )
}

export default Navbar