Navbar.tsx

import Link from '@material-ui/core/Link'
import AnalysisIconOff from 'assets/icons/tabbar/analysis/analysis-off.svg'
import AnalysisIconOn from 'assets/icons/tabbar/analysis/analysis-on.svg'
import BulbIconOff from 'assets/icons/tabbar/astuces/astuces-off.svg'
import BulbIconOn from 'assets/icons/tabbar/astuces/astuces-on.svg'
import ConsoIconOff from 'assets/icons/tabbar/conso/conso-off.svg'
import ConsoIconOn from 'assets/icons/tabbar/conso/conso-on.svg'
import ChallengeIconOff from 'assets/icons/tabbar/defi/defi-off.svg'
import ChallengeIconOn from 'assets/icons/tabbar/defi/defi-on.svg'
import ParameterIconOff from 'assets/icons/tabbar/parametre/parametre-off.svg'
import ParameterIconOn from 'assets/icons/tabbar/parametre/parametre-on.svg'
import logos from 'assets/png/logos_partenaires.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useClient } from 'cozy-client'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { UsageEventType } from 'enums'
import React, { useCallback } from 'react'
import { NavLink, useLocation } from 'react-router-dom'
import UsageEventService from 'services/usageEvent.service'
import { useAppSelector } from 'store/hooks'
import './navBar.scss'

const Navbar = () => {
  const { t } = useI18n()
  const {
    challengeExplorationNotification,
    challengeActionNotification,
    challengeDuelNotification,
    analysisNotification,
  } = useAppSelector(state => state.ecolyo.global)
  const { pathname } = useLocation()

  const client = useClient()
  const emitNavEvent = useCallback(
    async (targetPage: string) => {
      await UsageEventService.addEvent(client, {
        type: UsageEventType.NAVIGATION_EVENT,
        target: targetPage,
      })
    },
    [client]
  )

  /** Return class "is-active" if pathname includes matcher */
  const isActive = (matcher: string) => {
    return pathname.includes(matcher) ? 'is-active' : ''
  }

  return (
    <aside className="o-sidebar">
      <nav role="navigation" aria-label="navigation">
        <ul className="c-nav">
          <li
            className="c-nav-item"
            onClick={() => emitNavEvent('consumption')}
          >
            <Link
              component={NavLink}
              to="/consumption"
              className={`c-nav-link ${isActive('/consumption')}`}
            >
              <StyledIcon className="c-nav-icon off" icon={ConsoIconOff} />
              <StyledIcon className="c-nav-icon on" icon={ConsoIconOn} />
              {t('navigation.consumption')}
            </Link>
          </li>
          <li className="c-nav-item" onClick={() => emitNavEvent('challenges')}>
            <Link
              component={NavLink}
              to="/challenges"
              className={`c-nav-link ${isActive('/challenges')}`}
            >
              {(challengeExplorationNotification ||
                challengeActionNotification ||
                challengeDuelNotification) && <div className="nb-notif">1</div>}
              <StyledIcon className="c-nav-icon off" icon={ChallengeIconOff} />
              <StyledIcon className="c-nav-icon on" icon={ChallengeIconOn} />
              {t('navigation.challenges')}
            </Link>
          </li>
          <li
            className="c-nav-item"
            onClick={() => emitNavEvent('ecogestures')}
          >
            <Link
              component={NavLink}
              to="/ecogestures"
              className={`c-nav-link ${isActive('/ecogesture')}`}
            >
              <StyledIcon className="c-nav-icon off" icon={BulbIconOff} />
              <StyledIcon className="c-nav-icon on" icon={BulbIconOn} />
              {t('navigation.ecogestures')}
            </Link>
          </li>
          <li className="c-nav-item" onClick={() => emitNavEvent('analysis')}>
            <Link
              component={NavLink}
              to="/analysis"
              className={`c-nav-link ${
                pathname === '/analysis' ? 'is-active' : ''
              }`}
            >
              {analysisNotification && <div className="nb-notif">1</div>}
              <StyledIcon className="c-nav-icon off" icon={AnalysisIconOff} />
              <StyledIcon className="c-nav-icon on" icon={AnalysisIconOn} />
              {t('navigation.analysis')}
            </Link>
          </li>
          <li className="c-nav-item" onClick={() => emitNavEvent('options')}>
            <Link
              component={NavLink}
              to="/options"
              className={`c-nav-link ${isActive('/options')}`}
            >
              <StyledIcon className="c-nav-icon off" icon={ParameterIconOff} />
              <StyledIcon className="c-nav-icon on" icon={ParameterIconOn} />
              {t('navigation.options')}
            </Link>
          </li>
        </ul>
      </nav>
      <div role="contentinfo" className="logos-container">
        <img src={logos} alt="ensemble de logos" />
      </div>
    </aside>
  )
}

export default Navbar