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

Update main navigation

Browse Source
This commit is contained in:
kvakazyambra 2023-08-17 23:28:24 +03:00
parent f2a5751f3e
commit 2ccdda19c4
4 changed files with 326 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Nav/Header.module.scss
View File

@ -124,11 +124,14 @@
font-size: 1.4rem !important;
margin: 0 !important;
opacity: 1;
text-transform: capitalize;
transition: opacity 0.3s;
li {
margin-bottom: 0 !important;
&:first-letter {
text-transform: capitalize;
}
}
@include media-breakpoint-down(md) {
@ -507,3 +510,82 @@
background-color: var(--link-hover-background) !important;
}
}
.subnavigation {
background: #fff;
font-weight: 500;
left: 0;
position: absolute;
top: 100%;
width: 100%;
ul {
display: flex;
flex-wrap: wrap;
height: 6rem;
line-height: 6rem;
padding: 0 150px 0 0;
position: relative;
overflow: hidden;
@include media-breakpoint-up(xl) {
margin: 0 calc(0.5 * var(--bs-gutter-x));
}
li {
margin-right: 2.4rem;
white-space: nowrap;
}
.rightItem {
margin-right: 0;
position: absolute;
right: 0;
top: 0;
}
}
a:link,
a:visited {
border: none;
&:hover {
.subnavigationItemName {
background: #000;
}
.icon {
filter: invert(1);
}
}
}
}
.subnavigationItemName {
align-items: center;
background: #fff;
display: flex;
transition: background-color 0.3s;
.subnavigationFeed & {
line-height: 1.4;
}
}
.subnavigationFeed {
li {
align-items: center;
display: flex;
}
.icon {
margin-right: 0.3em;
}
}
.rightItemIcon {
display: inline-block;
margin-left: 0.3em;
position: relative;
top: 0.15em;
}

234
src/components/Nav/Header.tsx
View File

@ -49,6 +49,10 @@ export const Header = (props: Props) => {
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)
@ -106,6 +110,14 @@ export const Header = (props: Props) => {
}, 'create')
}
const toggleSubnavigation = (isShow, signal) => {
setIsKnowledgeBaseVisible(false)
setIsTopicsVisible(false)
setIsZineVisible(false)
setIsFeedVisible(false)
signal(isShow)
}
return (
<header
class={styles.mainHeader}
@ -138,13 +150,36 @@ export const Header = (props: Props) => {
</Show>
<ul class={clsx('view-switcher', styles.mainNavigation)} classList={{ fixed: fixed() }}>
<li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
<a href={getPagePath(router, 'home')}>{t('zine')}</a>
<a
onmouseover={() => toggleSubnavigation(true, setIsZineVisible)}
href={getPagePath(router, 'home')}
>
{t('zine')}
</a>
</li>
<li classList={{ 'view-switcher__item--selected': page().route.startsWith('feed') }}>
<a href={getPagePath(router, 'feed')}>{t('feed')}</a>
<a
onmouseover={() => toggleSubnavigation(true, setIsFeedVisible)}
href={getPagePath(router, 'feed')}
>
{t('feed')}
</a>
</li>
<li classList={{ 'view-switcher__item--selected': page().route === 'topics' }}>
<a href={getPagePath(router, 'topics')}>{t('topics')}</a>
<a
onmouseover={() => toggleSubnavigation(true, setIsTopicsVisible)}
href={getPagePath(router, 'topics')}
>
{t('topics')}
</a>
</li>
<li classList={{ 'view-switcher__item--selected': page().route === 'authors' }}>
<a href={getPagePath(router, 'authors')}>{t('community')}</a>
</li>
<li>
<a onmouseover={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}>
{t('Knowledge base')}
</a>
</li>
</ul>
</div>
@ -186,7 +221,200 @@ export const Header = (props: Props) => {
<div />
</div>
</div>
<div class={clsx(styles.subnavigation, 'col')} classList={{ hidden: !isKnowledgeBaseVisible() }}>
<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="">Частые вопросы</a>
</li>
<li>
<a href="">Энциклопедия</a>
</li>
<li>
<a href="">Как поддержать?</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() }}>
<ul class="nodash">
<li>
<a href="">Искусство</a>
</li>
<li>
<a href="">Подкасты</a>
</li>
<li>
<a href="">Спецпроекты</a>
</li>
<li>
<a href="">#Интервью</a>
</li>
<li>
<a href="">#Репортажи</a>
</li>
<li>
<a href="">#Личный опыт</a>
</li>
<li>
<a href="">#Общество</a>
</li>
<li>
<a href="">#Культура</a>
</li>
<li>
<a href="">#Теории</a>
</li>
<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>
<div class={clsx(styles.subnavigation, 'col')} classList={{ hidden: !isTopicsVisible() }}>
<ul class="nodash">
<li>
<a href="">#Интервью</a>
</li>
<li>
<a href="">#Репортажи</a>
</li>
<li>
<a href="">#Личный опыт</a>
</li>
<li>
<a href="">#Общество</a>
</li>
<li>
<a href="">#Культура</a>
</li>
<li>
<a href="">#Теории</a>
</li>
<li>
<a href="">#Поэзия</a>
</li>
<li>
<a href="">#Теории</a>
</li>
</ul>
</div>
<div
class={clsx(styles.subnavigation, styles.subnavigationFeed, 'col')}
classList={{ hidden: !isFeedVisible() }}
>
<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>

20
src/pages/about/guide.page.tsx
View File

@ -117,15 +117,13 @@ export const GuidePage = () => {
<p>
Материалы в&nbsp;Дискурсе объединяются по&nbsp;<b>темам</b>
&mdash;&nbsp;ключевым словам, которые располагаются в&nbsp;конце материалов и&nbsp;связывают
материалы по&nbsp;жанрам (например,
<a href="/topic/interview">интервью</a>, <a href="/topic/reportage">репортажи</a>,{' '}
<a href="/topic/essay">эссе</a>, <a href="/topic/likbez">ликбезы</a>
материалы по&nbsp;жанрам (например, <a href="/topic/interview">интервью</a>,{' '}
<a href="/topic/reportage">репортажи</a>, <a href="/topic/essay">эссе</a>,{' '}
<a href="/topic/likbez">ликбезы</a>
), по&nbsp;тематике (<a href="/topic/cinema">кино</a>,{' '}
<a href="/topic/philosophy">философия</a>, <a href="/topic/history">история</a>,{' '}
<a href="/topic/absurdism">абсурдизм</a>, <a href="/topic/sex">секс</a> и&nbsp;т.д.) или
в&nbsp;серии (как &laquo;
<a href="/topic/zakony-mira">Законы мира</a>
&raquo; или &laquo;
в&nbsp;серии (как &laquo;<a href="/topic/zakony-mira">Законы мира</a>&raquo; или &laquo;
<a href="/topic/za-liniey-mannergeyma">За&nbsp;линией Маннергейма</a>
&raquo;). Темы объединяют сотни публикаций, помогают ориентироваться в&nbsp;журнале
и&nbsp;следить за&nbsp;интересными материалами.
@ -136,11 +134,11 @@ export const GuidePage = () => {
<p>
Дискурс объединяет журналистов, активистов, музыкантов, художников, фотографов, режиссеров,
философов, ученых и&nbsp;других замечательных людей. Каждый может{' '}
<a href="/create">прислать</a>
свой материал в&nbsp;журнал. Формат и&nbsp;тематика не&nbsp;имеют значения, единственное,
что важно &mdash; <a href="/how-to-write-a-good-article">хороший</a> ли&nbsp;материал. Если
сообщество поддержит вашу публикацию, она выйдет в&nbsp;журнале и&nbsp;станет доступна
тысячам наших читателей.
<a href="/create">прислать</a> свой материал в&nbsp;журнал. Формат и&nbsp;тематика
не&nbsp;имеют значения, единственное, что важно &mdash;{' '}
<a href="/how-to-write-a-good-article">хороший</a> ли&nbsp;материал. Если сообщество
поддержит вашу публикацию, она выйдет в&nbsp;журнале и&nbsp;станет доступна тысячам наших
читателей.
</p>
</section>

7
src/styles/app.scss
View File

@ -337,7 +337,7 @@ button {
@include media-breakpoint-up(md) {
margin-top: -0.5rem;
position: sticky;
top: 90px;
top: 135px;
}
@include media-breakpoint-up(sm) {
@ -776,7 +776,7 @@ figure {
.main-content {
flex: 1 100%;
min-height: 90vh;
padding-top: 120px;
padding-top: 130px;
position: relative;
}
@ -855,13 +855,12 @@ figure {
.content-index {
@include font-size(1.4rem);
line-height: 1.4;
margin: 0 3.6rem 2em 0;
@include media-breakpoint-up(md) {
position: sticky;
top: 10rem;
top: 14rem;
}
ul ul {