discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

fix nav header

Browse Source
This commit is contained in:
Untone 2024-05-06 18:39:01 +03:00
parent a024080661
commit 500e8132dd
1 changed files with 19 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Nav/HeaderAuth.tsx
View File

@ -34,12 +34,12 @@ export const HeaderAuth = (props: Props) => {
const { page } = useRouter() const { page } = useRouter()
const { session, author, isSessionLoaded } = useSession() const { session, author, isSessionLoaded } = useSession()
const { unreadNotificationsCount, showNotificationsPanel } = useNotifications() const { unreadNotificationsCount, showNotificationsPanel } = useNotifications()
const { form, toggleEditorPanel, saveShout, saveDraft, publishShout } = useEditorContext() const { form, toggleEditorPanel, saveShout, publishShout } = useEditorContext()
const handleBellIconClick = (event: Event) => { const handleBellIconClick = (event: Event) => {
event.preventDefault() event.preventDefault()
if (!author()?.id) { if (!session()?.access_token) {
showModal('auth') showModal('auth')
return return
} }
@ -48,23 +48,19 @@ export const HeaderAuth = (props: Props) => {
} }
const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings') const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings')
const isNotificationsVisible = createMemo(() => author()?.id && !isEditorPage()) const isNotificationsVisible = createMemo(() => session()?.access_token && !isEditorPage())
const isSaveButtonVisible = createMemo(() => author()?.id && isEditorPage()) const isSaveButtonVisible = createMemo(() => session()?.access_token && isEditorPage())
const isCreatePostButtonVisible = createMemo(() => !isEditorPage()) const isCreatePostButtonVisible = createMemo(() => !isEditorPage())
const isAuthenticatedControlsVisible = createMemo(() => author()?.id && session()?.user?.email_verified) const isAuthenticatedControlsVisible = createMemo(
() => session()?.access_token && session()?.user?.email_verified,
)
const handleBurgerButtonClick = () => { const handleBurgerButtonClick = () => {
toggleEditorPanel() toggleEditorPanel()
} }
// FIXME: use or remove const handleSaveButtonClick = () => {
const handleSaveClick = () => {
const hasTopics = form.selectedTopics?.length > 0
if (hasTopics) {
saveShout(form) saveShout(form)
} else {
saveDraft(form)
}
} }
const [width, setWidth] = createSignal(0) const [width, setWidth] = createSignal(0)
@ -110,14 +106,8 @@ export const HeaderAuth = (props: Props) => {
<Show when={isSessionLoaded()} keyed={true}> <Show when={isSessionLoaded()} keyed={true}>
<div class={clsx('col-auto col-lg-7', styles.usernav)}> <div class={clsx('col-auto col-lg-7', styles.usernav)}>
<div class={styles.userControl}> <div class={styles.userControl}>
<Show when={isCreatePostButtonVisible() && author()?.id}> <Show when={isCreatePostButtonVisible() && session()?.access_token}>
<div <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
class={clsx(
styles.userControlItem,
styles.userControlItemVerbose,
// styles.userControlItemCreate,
)}
>
<a href={getPagePath(router, 'create')}> <a href={getPagePath(router, 'create')}>
<span class={styles.textLabel}>{t('Create post')}</span> <span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="pencil-outline" class={styles.icon} /> <Icon name="pencil-outline" class={styles.icon} />
@ -224,18 +214,12 @@ export const HeaderAuth = (props: Props) => {
</div> </div>
</Show> </Show>
<Show when={isCreatePostButtonVisible() && !!author()?.id}> <Show when={isCreatePostButtonVisible() && !session()?.access_token}>
<div <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
class={clsx(
styles.userControlItem,
styles.userControlItemVerbose,
// styles.userControlItemCreate,
)}
>
<a href={getPagePath(router, 'create')}> <a href={getPagePath(router, 'create')}>
<span class={styles.textLabel}>{t('Create post')}</span> <span class={styles.textLabel}>{t('Create post')}</span>
<Icon name="pencil-outline" class={styles.icon} /> <Icon name="pencil" class={styles.icon} />
<Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} /> <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
</a> </a>
</div> </div>
</Show> </Show>
@ -243,24 +227,19 @@ export const HeaderAuth = (props: Props) => {
<Show <Show
when={isAuthenticatedControlsVisible()} when={isAuthenticatedControlsVisible()}
fallback={ fallback={
<Show when={!author()?.id}> <Show when={!session()?.access_token}>
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}> <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
<a href="?m=auth&mode=login"> <a href="?m=auth&mode=login">
<span class={styles.textLabel}>{t('Enter')}</span> <span class={styles.textLabel}>{t('Enter')}</span>
<Icon name="key" class={styles.icon} /> <Icon name="key" class={styles.icon} />
<Icon name="key" class={clsx(styles.icon, styles.iconHover)} /> {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
</a> </a>
</div> </div>
</Show> </Show>
} }
> >
<Show when={!isSaveButtonVisible()}> <Show when={!isSaveButtonVisible()}>
<div <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
class={clsx(
styles.userControlItem,
// styles.userControlItemInbox
)}
>
<a href={getPagePath(router, 'inbox')}> <a href={getPagePath(router, 'inbox')}>
<div classList={{ entered: page().path === '/inbox' }}> <div classList={{ entered: page().path === '/inbox' }}>
<Icon name="inbox-white" class={styles.icon} /> <Icon name="inbox-white" class={styles.icon} />
@ -272,7 +251,7 @@ export const HeaderAuth = (props: Props) => {
</Show> </Show>
</div> </div>
<Show when={author()?.id}> <Show when={session()?.access_token}>
<ProfilePopup <ProfilePopup
onVisibilityChange={(isVisible) => { onVisibilityChange={(isVisible) => {
props.setIsProfilePopupVisible(isVisible) props.setIsProfilePopupVisible(isVisible)