Navbar.tsx

import React, { useContext } from 'react'
import { NavLink } from 'react-router-dom'
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'
import { UserContext } from '../../hooks/userContext'

const Navbar: React.FC = () => {
  const { isLogged, logoutUser } = useContext(UserContext)
  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>
        {isLogged ? (
          <p onClick={logoutUser}>Logout</p>
        ) : (
          <NavLink to="/login" activeClassName="active">
            <img src={login} className="navbar-icon" alt="Login icon" />
            Login
          </NavLink>
        )}
      </div>
    </div>
  )
}

export default Navbar