webapp/src/components/Nav/ProfilePopup.tsx

70 lines
1.9 KiB
TypeScript

import { useSession } from '../../context/session'
import type { PopupProps } from '../_shared/Popup'
import { Popup } from '../_shared/Popup'
import styles from '../_shared/Popup/Popup.module.scss'
import { getPagePath, openPage } from '@nanostores/router'
import { router, useRouter } from '../../stores/router'
import { useLocalize } from '../../context/localize'
import type { AuthorPageSearchParams } from '../Views/Author'
type ProfilePopupProps = Omit<PopupProps, 'children'>
export const ProfilePopup = (props: ProfilePopupProps) => {
const {
userSlug,
actions: { signOut }
} = useSession()
const { t } = useLocalize()
const { changeSearchParam } = useRouter<AuthorPageSearchParams>()
const openAuthorComments = () => {
openPage(router, 'author', { slug: userSlug() })
changeSearchParam('by', 'commented')
}
return (
<Popup {...props} horizontalAnchor="right" variant="bordered">
<ul class="nodash">
<li>
<a href={getPagePath(router, 'author', { slug: userSlug() })}>{t('Profile')}</a>
</li>
<li>
<a href="#">{t('Drafts')}</a>
</li>
<li>
<a href="#">{t('Subscriptions')}</a>
</li>
<li>
<a
href="#"
onClick={(event) => {
event.preventDefault()
openAuthorComments()
}}
>
{t('Comments')}
</a>
</li>
<li>
<a href="#">{t('Bookmarks')}</a>
</li>
<li>
<a href={getPagePath(router, 'profileSettings')}>{t('Settings')}</a>
</li>
<li class={styles.topBorderItem}>
<a
href="#"
onClick={(event) => {
event.preventDefault()
signOut()
}}
>
{t('Logout')}
</a>
</li>
</ul>
</Popup>
)
}