Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import React, { useContext } from 'react'
import { AppContext } from 'components/Contexts/AppContextProvider'
import { translate } from 'cozy-ui/react/I18n'
import { NavLink } from 'react-router-dom'
import Icon from 'cozy-ui/react/Icon'
import ConsoIconOff from 'assets/icons/tabbar/conso/off.svg'
import ChallengeIconOn from 'assets/icons/tabbar/defi/on.svg'
import ChallengeIconOff from 'assets/icons/tabbar/defi/off.svg'
import ChallengeIconOffNotif from 'assets/icons/tabbar/defi/off-notif.svg'
import ParameterIconOff from 'assets/icons/tabbar/parametre/off.svg'
import ConsoIconOn from 'assets/icons/tabbar/conso/on.svg'
import ParameterIconOn from 'assets/icons/tabbar/parametre/on.svg'
interface NavbarProps {
t: Function
}
export const Navbar = ({ t }: NavbarProps) => {
const { challengeNotification } = useContext(AppContext)
return (
<aside className="o-sidebar">
<nav>
<ul className="c-nav">
<li className="c-nav-item">
<NavLink
to="/consumption"
className="c-nav-link"
activeClassName="is-active"
>
<Icon className="c-nav-icon off" icon={ConsoIconOff} />
<Icon className="c-nav-icon on" icon={ConsoIconOn} />
{t('Nav.consumption')}
</NavLink>
</li>
<li className="c-nav-item">
<NavLink
to="/challenges"
className="c-nav-link"
activeClassName="is-active"
>
<Icon
className="c-nav-icon off"
icon={
challengeNotification
? ChallengeIconOffNotif
: ChallengeIconOff
}
/>
<Icon className="c-nav-icon on" icon={ChallengeIconOn} />
{t('Nav.challenges')}
</NavLink>
</li>
<li className="c-nav-item">
<NavLink
to="/parameters"
className="c-nav-link"
activeClassName="is-active"
>
<Icon className="c-nav-icon off" icon={ParameterIconOff} />
<Icon className="c-nav-icon on" icon={ParameterIconOn} />
{t('Nav.parameters')}
</NavLink>
</li>
</ul>
</nav>
</aside>
)
}
// translate() provide t() to use translations (ex: locales/en.json)
export default translate()(Navbar)