58 lines
1.8 KiB
JavaScript
58 lines
1.8 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import classnames from 'classnames'
|
|
import React from 'react'
|
|
|
|
import { ReactComponent as CustomerDataReversedIcon } from 'src/styling/icons/customer-nav/data/comet.svg'
|
|
import { ReactComponent as CustomerDataIcon } from 'src/styling/icons/customer-nav/data/white.svg'
|
|
import { ReactComponent as NoteReversedIcon } from 'src/styling/icons/customer-nav/note/comet.svg'
|
|
import { ReactComponent as NoteIcon } from 'src/styling/icons/customer-nav/note/white.svg'
|
|
import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/customer-nav/overview/comet.svg'
|
|
import { ReactComponent as OverviewIcon } from 'src/styling/icons/customer-nav/overview/white.svg'
|
|
|
|
import styles from './CustomerSidebar.styles.js'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const CustomerSidebar = ({ isSelected, onClick }) => {
|
|
const classes = useStyles()
|
|
const sideBarOptions = [
|
|
{
|
|
code: 'overview',
|
|
display: 'Overview',
|
|
Icon: OverviewIcon,
|
|
InverseIcon: OverviewReversedIcon
|
|
},
|
|
{
|
|
code: 'customerData',
|
|
display: 'Customer Data',
|
|
Icon: CustomerDataIcon,
|
|
InverseIcon: CustomerDataReversedIcon
|
|
},
|
|
{
|
|
code: 'notes',
|
|
display: 'Notes',
|
|
Icon: NoteIcon,
|
|
InverseIcon: NoteReversedIcon
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className={classes.sidebar}>
|
|
{sideBarOptions?.map(({ Icon, InverseIcon, display, code }) => (
|
|
<div
|
|
className={classnames({
|
|
[classes.activeLink]: isSelected(code),
|
|
[classes.link]: true
|
|
})}
|
|
onClick={() => onClick(code)}>
|
|
<div className={classes.icon}>
|
|
{isSelected(code) ? <Icon /> : <InverseIcon />}
|
|
</div>
|
|
{display}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CustomerSidebar
|