48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { Link } from 'react-router-dom'
|
|
import { useAuth } from '../../auth'
|
|
import { useLegal } from '../../legal'
|
|
import routes from '../../routes'
|
|
import './styles.css'
|
|
|
|
type NavbarProps = {
|
|
isOpen: boolean
|
|
closeMenu: () => void
|
|
}
|
|
|
|
const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
|
|
|
|
function Navbar({ isOpen, closeMenu }: NavbarProps): JSX.Element {
|
|
const { logout } = useAuth()
|
|
const { t } = useTranslation()
|
|
const legal = useLegal()
|
|
const combinedClassNames = ['navbar', isOpen && 'navbar--open'].filter(Boolean).join(' ')
|
|
return (
|
|
<aside className={combinedClassNames}>
|
|
<div className='navbar__overlay' onClick={closeMenu}></div>
|
|
<div className='navbar__panel'>
|
|
<div className="navbar__close-btn" onClick={closeMenu}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
|
<title>cross</title>
|
|
<path d="M10.051 12l-10.051 10.051 1.949 1.949 10.051-10.051 10.051 10.051 1.949-1.949-10.051-10.051 10.051-10.051-1.949-1.949-10.051 10.051-10.051-10.051-1.949 1.949 10.051 10.051z"></path>
|
|
</svg>
|
|
</div>
|
|
<nav className='navbar__nav'>
|
|
{legal?.map((item) => (
|
|
<Link key={item.type} to={routes.client.legal(item.type)} onClick={closeMenu}>
|
|
{capitalize(item.title)}
|
|
</Link>
|
|
))}
|
|
<a href='https://aura.wit.life/' onClick={closeMenu} target='_blank' rel='noopener noreferrer'>
|
|
{t('contact_us')}
|
|
</a>
|
|
<hr />
|
|
<a href='#' onClick={logout}>Log Out</a>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|