019c4540d0
* Subnavigation fixes * pass randomTopics as prop to header --------- Co-authored-by: kvakazyambra <kvakazyambra@gmail.com> Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>
456 lines
16 KiB
TypeScript
456 lines
16 KiB
TypeScript
import { For, Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
|
||
import { getPagePath, redirectPage } from '@nanostores/router'
|
||
import { clsx } from 'clsx'
|
||
|
||
import { Modal } from '../Modal'
|
||
import { AuthModal } from '../AuthModal'
|
||
import { HeaderAuth } from '../HeaderAuth'
|
||
import { ConfirmModal } from '../ConfirmModal'
|
||
import { getShareUrl, SharePopup } from '../../Article/SharePopup'
|
||
import { Snackbar } from '../Snackbar'
|
||
import { Icon } from '../../_shared/Icon'
|
||
import type { Topic } from '../../../graphql/types.gen'
|
||
|
||
import { useModalStore } from '../../../stores/ui'
|
||
import { router, useRouter } from '../../../stores/router'
|
||
|
||
import { getDescription } from '../../../utils/meta'
|
||
|
||
import { useLocalize } from '../../../context/localize'
|
||
import { useSession } from '../../../context/session'
|
||
import { useTopicsStore } from '../../../stores/zine/topics'
|
||
|
||
import styles from './Header.module.scss'
|
||
|
||
type Props = {
|
||
title?: string
|
||
slug?: string
|
||
isHeaderFixed?: boolean
|
||
articleBody?: string
|
||
cover?: string
|
||
scrollToComments?: (value: boolean) => void
|
||
randomTopics?: Topic[]
|
||
}
|
||
|
||
type HeaderSearchParams = {
|
||
source?: string
|
||
}
|
||
|
||
export const Header = (props: Props) => {
|
||
const { t, lang } = useLocalize()
|
||
|
||
const { modal } = useModalStore()
|
||
|
||
const {
|
||
actions: { requireAuthentication }
|
||
} = useSession()
|
||
|
||
const { page, searchParams } = useRouter<HeaderSearchParams>()
|
||
|
||
const [getIsScrollingBottom, setIsScrollingBottom] = createSignal(false)
|
||
const [getIsScrolled, setIsScrolled] = createSignal(false)
|
||
const [fixed, setFixed] = createSignal(false)
|
||
const [isSharePopupVisible, setIsSharePopupVisible] = createSignal(false)
|
||
const [isProfilePopupVisible, setIsProfilePopupVisible] = createSignal(false)
|
||
const [isKnowledgeBaseVisible, setIsKnowledgeBaseVisible] = createSignal(false)
|
||
const [isTopicsVisible, setIsTopicsVisible] = createSignal(false)
|
||
const [isZineVisible, setIsZineVisible] = createSignal(false)
|
||
const [isFeedVisible, setIsFeedVisible] = createSignal(false)
|
||
|
||
const toggleFixed = () => setFixed((oldFixed) => !oldFixed)
|
||
|
||
const tag = (topic: Topic) =>
|
||
/[ЁА-яё]/.test(topic.title || '') && lang() !== 'ru' ? topic.slug : topic.title
|
||
|
||
let windowScrollTop = 0
|
||
|
||
createEffect(() => {
|
||
const mainContent = document.querySelector('.main-content') as HTMLDivElement
|
||
|
||
if (fixed() || modal() !== null) {
|
||
windowScrollTop = window.scrollY
|
||
mainContent.style.marginTop = `-${windowScrollTop}px`
|
||
}
|
||
|
||
document.body.classList.toggle('fixed', fixed() || modal() !== null)
|
||
document.body.classList.toggle(styles.fixed, fixed() && !modal())
|
||
|
||
if (!fixed() && !modal()) {
|
||
mainContent.style.marginTop = ''
|
||
window.scrollTo(0, windowScrollTop)
|
||
}
|
||
})
|
||
|
||
onMount(() => {
|
||
let scrollTop = window.scrollY
|
||
|
||
const handleScroll = () => {
|
||
setIsScrollingBottom(window.scrollY > scrollTop)
|
||
setIsScrolled(window.scrollY > 0)
|
||
scrollTop = window.scrollY
|
||
}
|
||
|
||
window.addEventListener('scroll', handleScroll, { passive: true })
|
||
onCleanup(() => {
|
||
window.removeEventListener('scroll', handleScroll)
|
||
})
|
||
})
|
||
|
||
const scrollToComments = (event, value) => {
|
||
event.preventDefault()
|
||
props.scrollToComments(value)
|
||
}
|
||
|
||
const handleBookmarkButtonClick = (ev) => {
|
||
requireAuthentication(() => {
|
||
// TODO: implement bookmark clicked
|
||
ev.preventDefault()
|
||
}, 'bookmark')
|
||
}
|
||
|
||
const handleCreateButtonClick = (ev) => {
|
||
requireAuthentication(() => {
|
||
ev.preventDefault()
|
||
|
||
redirectPage(router, 'create')
|
||
}, 'create')
|
||
}
|
||
|
||
const toggleSubnavigation = (isShow, signal?) => {
|
||
clearTimer()
|
||
setIsKnowledgeBaseVisible(false)
|
||
setIsTopicsVisible(false)
|
||
setIsZineVisible(false)
|
||
setIsFeedVisible(false)
|
||
|
||
if (signal) {
|
||
signal(isShow)
|
||
}
|
||
}
|
||
|
||
let timer
|
||
|
||
const clearTimer = () => {
|
||
clearTimeout(timer)
|
||
}
|
||
|
||
const hideSubnavigation = (ev, time = 500) => {
|
||
timer = setTimeout(() => {
|
||
toggleSubnavigation(false)
|
||
}, time)
|
||
}
|
||
|
||
return (
|
||
<header
|
||
class={styles.mainHeader}
|
||
classList={{
|
||
[styles.headerFixed]: props.isHeaderFixed,
|
||
[styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
|
||
[styles.headerScrolledBottom]:
|
||
(getIsScrollingBottom() && getIsScrolled() && !isProfilePopupVisible()) || isSharePopupVisible(),
|
||
[styles.headerWithTitle]: Boolean(props.title)
|
||
}}
|
||
>
|
||
<Modal variant={searchParams().source ? 'narrow' : 'wide'} name="auth" noPadding={true}>
|
||
<AuthModal />
|
||
</Modal>
|
||
|
||
<Modal variant="narrow" name="confirm">
|
||
<ConfirmModal />
|
||
</Modal>
|
||
|
||
<div class={clsx(styles.mainHeaderInner, 'wide-container')}>
|
||
<nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
|
||
<div class={clsx('col-md-5 col-xl-4 col-auto', styles.mainLogo)}>
|
||
<a href={getPagePath(router, 'home')}>
|
||
<img src="/logo.svg" alt={t('Discours')} />
|
||
</a>
|
||
</div>
|
||
<div class={clsx('col col-md-13 col-lg-12 offset-xl-1', styles.mainNavigationWrapper)}>
|
||
<Show when={props.title}>
|
||
<div class={styles.articleHeader}>{props.title}</div>
|
||
</Show>
|
||
<ul class={clsx('view-switcher', styles.mainNavigation)} classList={{ fixed: fixed() }}>
|
||
<li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
|
||
<a
|
||
classList={{ [styles.mainNavigationItemActive]: isZineVisible() }}
|
||
onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
|
||
onMouseOut={hideSubnavigation}
|
||
href={getPagePath(router, 'home')}
|
||
>
|
||
{t('zine')}
|
||
</a>
|
||
</li>
|
||
<li classList={{ 'view-switcher__item--selected': page().route.startsWith('feed') }}>
|
||
<a
|
||
classList={{ [styles.mainNavigationItemActive]: isFeedVisible() }}
|
||
onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
|
||
onMouseOut={hideSubnavigation}
|
||
href={getPagePath(router, 'feed')}
|
||
>
|
||
{t('feed')}
|
||
</a>
|
||
</li>
|
||
<li classList={{ 'view-switcher__item--selected': page().route === 'topics' }}>
|
||
<a
|
||
classList={{ [styles.mainNavigationItemActive]: isTopicsVisible() }}
|
||
onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
|
||
onMouseOut={hideSubnavigation}
|
||
href={getPagePath(router, 'topics')}
|
||
>
|
||
{t('topics')}
|
||
</a>
|
||
</li>
|
||
<li classList={{ 'view-switcher__item--selected': page().route === 'authors' }}>
|
||
<a
|
||
onMouseOver={(ev) => hideSubnavigation(ev, 0)}
|
||
onMouseOut={(ev) => hideSubnavigation(ev, 0)}
|
||
href={getPagePath(router, 'authors')}
|
||
>
|
||
{t('community')}
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
classList={{ [styles.mainNavigationItemActive]: isKnowledgeBaseVisible() }}
|
||
onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
|
||
onMouseOut={hideSubnavigation}
|
||
>
|
||
{t('Knowledge base')}
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
|
||
<Show when={props.title}>
|
||
<div class={clsx(styles.articleControls, 'col-auto')}>
|
||
<SharePopup
|
||
title={props.title}
|
||
imageUrl={props.cover}
|
||
shareUrl={getShareUrl()}
|
||
description={getDescription(props.articleBody)}
|
||
onVisibilityChange={(isVisible) => {
|
||
setIsSharePopupVisible(isVisible)
|
||
}}
|
||
containerCssClass={styles.control}
|
||
trigger={
|
||
<>
|
||
<Icon name="share-outline" class={styles.icon} />
|
||
<Icon name="share-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
|
||
</>
|
||
}
|
||
/>
|
||
<div onClick={(event) => scrollToComments(event, true)} class={styles.control}>
|
||
<Icon name="comment" class={styles.icon} />
|
||
<Icon name="comment-hover" class={clsx(styles.icon, styles.iconHover)} />
|
||
</div>
|
||
<a href="#" class={styles.control} onClick={handleCreateButtonClick}>
|
||
<Icon name="pencil-outline" class={styles.icon} />
|
||
<Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
|
||
</a>
|
||
<a href="#" class={styles.control} onClick={handleBookmarkButtonClick}>
|
||
<Icon name="bookmark" class={styles.icon} />
|
||
<Icon name="bookmark-hover" class={clsx(styles.icon, styles.iconHover)} />
|
||
</a>
|
||
</div>
|
||
</Show>
|
||
<div class={clsx(styles.burgerContainer, 'col-auto')}>
|
||
<div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
|
||
<div />
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class={clsx(styles.subnavigation, 'col')}
|
||
classList={{ hidden: !isKnowledgeBaseVisible() }}
|
||
onMouseOver={clearTimer}
|
||
onMouseOut={hideSubnavigation}
|
||
>
|
||
<ul class="nodash">
|
||
<li>
|
||
<a href="/about/manifest">Манифест</a>
|
||
</li>
|
||
<li>
|
||
<a href="/about/dogma">Догма</a>
|
||
</li>
|
||
<li>
|
||
<a href="/about/principles">Принципы сообщества</a>
|
||
</li>
|
||
<li>
|
||
<a href="/about/guide">Гид по дискурсу</a>
|
||
</li>
|
||
<li>
|
||
<a href="/about/manifest#participation">Как поддержать?</a>
|
||
</li>
|
||
<li>
|
||
<a href="/about/help">Как помочь?</a>
|
||
</li>
|
||
<li class={styles.rightItem}>
|
||
<a href="/connect">
|
||
{t('Suggest an idea')}
|
||
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div
|
||
class={clsx(styles.subnavigation, 'col')}
|
||
classList={{ hidden: !isZineVisible() }}
|
||
onMouseOver={clearTimer}
|
||
onMouseOut={hideSubnavigation}
|
||
>
|
||
<ul class="nodash">
|
||
<li>
|
||
<a href="/topic/interview">#Интервью</a>
|
||
</li>
|
||
<li>
|
||
<a href="/topic/reportage">#Репортажи</a>
|
||
</li>
|
||
<li>
|
||
<a href="/topic/empiric">#Личный опыт</a>
|
||
</li>
|
||
<li>
|
||
<a href="/topic/society">#Общество</a>
|
||
</li>
|
||
<li>
|
||
<a href="/topic/culture">#Культура</a>
|
||
</li>
|
||
<li>
|
||
<a href="/topic/theory">#Теории</a>
|
||
</li>
|
||
<li>
|
||
<a href="/topic/poetry">#Поэзия</a>
|
||
</li>
|
||
<li class={styles.rightItem}>
|
||
<a href="/topics">
|
||
{t('All topics')}
|
||
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div
|
||
class={clsx(styles.subnavigation, 'col')}
|
||
classList={{ hidden: !isTopicsVisible() }}
|
||
onMouseOver={clearTimer}
|
||
onMouseOut={hideSubnavigation}
|
||
>
|
||
<ul class="nodash">
|
||
<Show when={props.randomTopics && props.randomTopics.length > 0}>
|
||
<For each={props.randomTopics}>
|
||
{(topic) => (
|
||
<li class="item">
|
||
<a href={`/topic/${topic.slug}`}>
|
||
<span>#{tag(topic)}</span>
|
||
</a>
|
||
</li>
|
||
)}
|
||
</For>
|
||
<li class={styles.rightItem}>
|
||
<a href="/topics">
|
||
{t('All topics')}
|
||
<Icon name="arrow-right-black" class={clsx(styles.icon, styles.rightItemIcon)} />
|
||
</a>
|
||
</li>
|
||
</Show>
|
||
</ul>
|
||
</div>
|
||
|
||
<div
|
||
class={clsx(styles.subnavigation, styles.subnavigationFeed, 'col')}
|
||
classList={{ hidden: !isFeedVisible() }}
|
||
onMouseOver={clearTimer}
|
||
onMouseOut={hideSubnavigation}
|
||
>
|
||
<ul class="nodash">
|
||
<li>
|
||
<a
|
||
href={getPagePath(router, 'feed')}
|
||
class={clsx({
|
||
[styles.selected]: page().route === 'feed'
|
||
})}
|
||
>
|
||
<span class={styles.subnavigationItemName}>
|
||
<Icon name="feed-all" class={styles.icon} />
|
||
{t('general feed')}
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<a
|
||
href={getPagePath(router, 'feedMy')}
|
||
class={clsx({
|
||
[styles.selected]: page().route === 'feedMy'
|
||
})}
|
||
>
|
||
<span class={styles.subnavigationItemName}>
|
||
<Icon name="feed-my" class={styles.icon} />
|
||
{t('My feed')}
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href={getPagePath(router, 'feedCollaborations')}
|
||
class={clsx({
|
||
[styles.selected]: page().route === 'feedCollaborations'
|
||
})}
|
||
>
|
||
<span class={styles.subnavigationItemName}>
|
||
<Icon name="feed-collaborate" class={styles.icon} />
|
||
{t('Accomplices')}
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href={getPagePath(router, 'feedDiscussions')}
|
||
class={clsx({
|
||
[styles.selected]: page().route === 'feedDiscussions'
|
||
})}
|
||
>
|
||
<span class={styles.subnavigationItemName}>
|
||
<Icon name="feed-discussion" class={styles.icon} />
|
||
{t('Discussions')}
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href={getPagePath(router, 'feedBookmarks')}
|
||
class={clsx({
|
||
[styles.selected]: page().route === 'feedBookmarks'
|
||
})}
|
||
>
|
||
<span class={styles.subnavigationItemName}>
|
||
<Icon name="bookmark" class={styles.icon} />
|
||
{t('Bookmarks')}
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a
|
||
href={getPagePath(router, 'feedNotifications')}
|
||
class={clsx({
|
||
[styles.selected]: page().route === 'feedNotifications'
|
||
})}
|
||
>
|
||
<span class={styles.subnavigationItemName}>
|
||
<Icon name="feed-notifications" class={styles.icon} />
|
||
{t('Notifications')}
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
<Snackbar />
|
||
</div>
|
||
</header>
|
||
)
|
||
}
|