diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 6c6c59bb..967ef756 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -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;
+}
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 614597da..be286e1d 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/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,14 @@ export const Header = (props: Props) => {
}, 'create')
}
+ const toggleSubnavigation = (isShow, signal) => {
+ setIsKnowledgeBaseVisible(false)
+ setIsTopicsVisible(false)
+ setIsZineVisible(false)
+ setIsFeedVisible(false)
+ signal(isShow)
+ }
+
return (
{
@@ -186,7 +221,200 @@ export const Header = (props: Props) => {
+
+
+
+
+
+
+
+
+
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 1b8d1620..cc2c43ae 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) {
@@ -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 {