Fix header subnavigation links

This commit is contained in:
kvakazyambra 2023-09-06 23:45:12 +03:00
parent c0e4f066c1
commit 6e4f44749e
2 changed files with 49 additions and 34 deletions

View File

@ -274,13 +274,7 @@ export const Header = (props: Props) => {
<a href="/about/guide">Гид по дискурсу</a> <a href="/about/guide">Гид по дискурсу</a>
</li> </li>
<li> <li>
<a href="">Частые вопросы</a> <a href="/about/manifest#participation">Как поддержать?</a>
</li>
<li>
<a href="">Энциклопедия</a>
</li>
<li>
<a href="">Как поддержать?</a>
</li> </li>
<li> <li>
<a href="/about/help">Как помочь?</a> <a href="/about/help">Как помочь?</a>
@ -302,7 +296,7 @@ export const Header = (props: Props) => {
> >
<ul class="nodash"> <ul class="nodash">
<li> <li>
<a href="">Искусство</a> <a href="/expo/image">Искусство</a>
</li> </li>
<li> <li>
<a href="">Подкасты</a> <a href="">Подкасты</a>
@ -371,6 +365,12 @@ export const Header = (props: Props) => {
<li> <li>
<a href="">#Теории</a> <a href="">#Теории</a>
</li> </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> </ul>
</div> </div>

View File

@ -1,36 +1,51 @@
import { For, Show } from 'solid-js'
import type { Topic } from '../../graphql/types.gen'
import { Icon } from '../_shared/Icon' import { Icon } from '../_shared/Icon'
import { useLocalize } from '../../context/localize' import { useLocalize } from '../../context/localize'
import './Topics.scss' import './Topics.scss'
export const NavTopics = (props: { topics: Topic[] }) => { export const NavTopics = () => {
const { t, lang } = useLocalize() const { t } = useLocalize()
const tag = (topic: Topic) =>
/[ЁА-яё]/.test(topic.title || '') && lang() !== 'ru' ? topic.slug : topic.title
// TODO: something about subtopics
return ( return (
<nav class="subnavigation wide-container text-2xl"> <nav class="subnavigation wide-container text-2xl">
<ul class="topics"> <ul class="topics">
<Show when={props.topics.length > 0}> <li class="item">
<For each={props.topics}> <a href="/expo/image">Искусство</a>
{(topic) => ( </li>
<li class="item"> <li class="item">
<a href={`/topic/${topic.slug}`}> <a href="">Подкасты</a>
<span>#{tag(topic)}</span> </li>
</a> <li class="item">
</li> <a href="">Спецпроекты</a>
)} </li>
</For> <li class="item">
<li class="item right"> <a href="">#Интервью</a>
<a href={`/topics`}> </li>
<span> <li class="item">
{t('All topics')} <a href="">#Репортажи</a>
<Icon name="arrow-right-black" class={'icon'} /> </li>
</span> <li class="item">
</a> <a href="">#Личный опыт</a>
</li> </li>
</Show> <li class="item">
<a href="">#Общество</a>
</li>
<li class="item">
<a href="">#Культура</a>
</li>
<li class="item">
<a href="">#Теории</a>
</li>
<li class="item">
<a href="">#Поэзия</a>
</li>
<li class="item right">
<a href={`/topics`}>
<span>
{t('All topics')}
<Icon name="arrow-right-black" class={'icon'} />
</span>
</a>
</li>
</ul> </ul>
</nav> </nav>
) )