diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss index f3da4d7e..569f8f80 100644 --- a/src/components/Nav/Header/Header.module.scss +++ b/src/components/Nav/Header/Header.module.scss @@ -96,9 +96,10 @@ .usernav { display: inline-flex; font-weight: 500; + justify-content: end; position: relative; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { flex: 1 !important; max-width: 100% !important; padding: 0 !important; @@ -114,7 +115,7 @@ @include font-size(1.7rem); position: relative; - @include media-breakpoint-down(md) { + @include media-breakpoint-down(lg) { display: none; } @@ -125,15 +126,10 @@ .mainNavigation { font-size: 1.4rem !important; - margin: 0 !important; + margin: 0 0 0 -0.4rem !important; opacity: 1; - text-transform: capitalize; transition: opacity 0.3s; - li { - margin-bottom: 0 !important; - } - @include media-breakpoint-down(md) { background: var(--background-color); bottom: 0; @@ -166,6 +162,24 @@ } } } + + a, + button { + padding: 0 0.4rem; + } + + li { + margin-bottom: 0 !important; + + &:first-letter { + text-transform: capitalize; + } + } +} + +.mainNavigationItemActive { + background: #000; + color: #fff !important; } .headerWithTitle.headerScrolledBottom { @@ -185,7 +199,7 @@ padding-left: divide($container-padding-x, 2); } - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { display: none; } } @@ -302,7 +316,7 @@ transform: translateY(-50%); width: 100%; - @include media-breakpoint-up(md) { + @include media-breakpoint-up(lg) { right: 0; } @@ -464,7 +478,7 @@ } } - @include media-breakpoint-up(lg) { + @include media-breakpoint-up(xl) { margin-left: 0.5em !important; margin-right: 0.5em; width: auto; @@ -475,9 +489,10 @@ .textLabel { color: var(--link-color); - padding: 0; display: inline; + padding: 0; position: relative; + white-space: nowrap; z-index: 1; } } @@ -510,3 +525,91 @@ background-color: var(--link-hover-background) !important; } } + +.subnavigation { + background: #000; + color: #fff; + font-weight: 500; + left: 0; + position: absolute; + top: 100%; + transform: translateY(-2px); + width: 100%; + + @include media-breakpoint-down(md) { + display: none; + } + + ul { + display: flex; + flex-wrap: wrap; + height: 6rem; + line-height: 6rem; + margin-bottom: 0; + 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; + color: #fff; + + .icon { + filter: invert(1); + } + + &:hover { + opacity: 0.5; + } + } +} + +.subnavigationItemName { + align-items: center; + display: flex; + transition: background-color 0.3s; + + .subnavigationFeed & { + line-height: 60px; + } +} + +.subnavigationFeed { + ul { + padding-right: 0; + } + + li { + align-items: center; + display: flex; + } + + .icon { + margin-right: 0.3em; + } +} + +.rightItemIcon { + display: inline-block; + margin-left: 0.3em; + position: relative; + top: 0.15em; +} diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx index 5bc6f628..edb90465 100644 --- a/src/components/Nav/Header/Header.tsx +++ b/src/components/Nav/Header/Header.tsx @@ -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,30 @@ export const Header = (props: Props) => { }, '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 (
{ {t('Discours')} -
+
{props.title}
@@ -186,7 +253,217 @@ export const Header = (props: Props) => {
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx index ff924be3..d0adffb3 100644 --- a/src/components/Nav/HeaderAuth.tsx +++ b/src/components/Nav/HeaderAuth.tsx @@ -107,8 +107,11 @@ export const HeaderAuth = (props: Props) => { return ( -
-
+
+
diff --git a/src/pages/about/guide.page.tsx b/src/pages/about/guide.page.tsx index 6381dc93..90a80f96 100644 --- a/src/pages/about/guide.page.tsx +++ b/src/pages/about/guide.page.tsx @@ -117,15 +117,13 @@ export const GuidePage = () => {

Материалы в Дискурсе объединяются по темам — ключевым словам, которые располагаются в конце материалов и связывают - материалы по жанрам (например, - интервью, репортажи,{' '} - эссе, ликбезы + материалы по жанрам (например, интервью,{' '} + репортажи, эссе,{' '} + ликбезы ), по тематике (кино,{' '} философия, история,{' '} абсурдизм, секс и т.д.) или - в серии (как « - Законы мира - » или « + в серии (как «Законы мира» или « За линией Маннергейма »). Темы объединяют сотни публикаций, помогают ориентироваться в журнале и следить за интересными материалами. @@ -136,11 +134,11 @@ export const GuidePage = () => {

Дискурс объединяет журналистов, активистов, музыкантов, художников, фотографов, режиссеров, философов, ученых и других замечательных людей. Каждый может{' '} - прислать - свой материал в журнал. Формат и тематика не имеют значения, единственное, - что важно — хороший ли материал. Если - сообщество поддержит вашу публикацию, она выйдет в журнале и станет доступна - тысячам наших читателей. + прислать свой материал в журнал. Формат и тематика + не имеют значения, единственное, что важно —{' '} + хороший ли материал. Если сообщество + поддержит вашу публикацию, она выйдет в журнале и станет доступна тысячам наших + читателей.

diff --git a/src/styles/app.scss b/src/styles/app.scss index b2d205fc..a6d21e12 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -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) { @@ -578,7 +578,6 @@ figure { .view-switcher { @include font-size(1.4rem); - display: flex; flex-wrap: wrap; font-weight: 500; @@ -777,7 +776,7 @@ figure { .main-content { flex: 1 100%; min-height: 90vh; - padding-top: 120px; + padding-top: 130px; position: relative; } @@ -856,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 {