webapp/src/components/Nav/ProfileSettingsNavigation/ProfileSettingsNavigation.tsx
2024-07-04 00:27:58 +03:00

28 lines
913 B
TypeScript

import { clsx } from 'clsx'
import { useLocalize } from '../../../context/localize'
import { useLocation } from '@solidjs/router'
import styles from './ProfileSettingsNavigation.module.scss'
export const ProfileSettingsNavigation = () => {
const { t } = useLocalize()
const loc = useLocation()
return (
<>
<h4 class={styles.navigationHeader}>{t('Settings')}</h4>
<ul class={clsx(styles.navigation, 'nodash')}>
<li class={clsx({ [styles.active]: loc?.pathname === '/profile' })}>
<a href="/profile">{t('Profile')}</a>
</li>
<li class={clsx({ [styles.active]: loc?.pathname === '/profile/subs' })}>
<a href="/profile/subs">{t('Subscriptions')}</a>
</li>
<li class={clsx({ [styles.active]: loc?.pathname === '/profile/security' })}>
<a href="/profile/security">{t('Security')}</a>
</li>
</ul>
</>
)
}