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

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 { useLocalize } from '../../context/localize'
import './Topics.scss'
export const NavTopics = (props: { topics: Topic[] }) => {
const { t, lang } = useLocalize()
const tag = (topic: Topic) =>
/[ЁА-яё]/.test(topic.title || '') && lang() !== 'ru' ? topic.slug : topic.title
// TODO: something about subtopics
export const NavTopics = () => {
const { t } = useLocalize()
return (
<nav class="subnavigation wide-container text-2xl">
<ul class="topics">
<Show when={props.topics.length > 0}>
<For each={props.topics}>
{(topic) => (
<li class="item">
<a href={`/topic/${topic.slug}`}>
<span>#{tag(topic)}</span>
</a>
</li>
)}
</For>
<li class="item right">
<a href={`/topics`}>
<span>
{t('All topics')}
<Icon name="arrow-right-black" class={'icon'} />
</span>
</a>
</li>
</Show>
<li class="item">
<a href="/expo/image">Искусство</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">
<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">
<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>
</nav>
)