Merge pull request #185 from Discours/feature/157-update-main-navigation

Update main navigation

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;
+}

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 (
     <header
       class={styles.mainHeader}
@@ -132,19 +160,58 @@ export const Header = (props: Props) => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <div class={clsx('col offset-xl-1', styles.mainNavigationWrapper)}>
+          <div class={clsx('col col-md-13 col-lg-12 offset-xl-1', styles.mainNavigationWrapper)}>
             <Show when={props.title}>
               <div class={styles.articleHeader}>{props.title}</div>
             </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
+                  classList={{ [styles.mainNavigationItemActive]: isZineVisible() }}
+                  onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
+                  onMouseOut={hideSubnavigation}
+                  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
+                  classList={{ [styles.mainNavigationItemActive]: isFeedVisible() }}
+                  onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
+                  onMouseOut={hideSubnavigation}
+                  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
+                  classList={{ [styles.mainNavigationItemActive]: isTopicsVisible() }}
+                  onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
+                  onMouseOut={hideSubnavigation}
+                  href={getPagePath(router, 'topics')}
+                >
+                  {t('topics')}
+                </a>
+              </li>
+              <li classList={{ 'view-switcher__item--selected': page().route === 'authors' }}>
+                <a
+                  onMouseOver={(ev) => hideSubnavigation(ev, 0)}
+                  onMouseOut={(ev) => hideSubnavigation(ev, 0)}
+                  href={getPagePath(router, 'authors')}
+                >
+                  {t('community')}
+                </a>
+              </li>
+              <li>
+                <a
+                  classList={{ [styles.mainNavigationItemActive]: isKnowledgeBaseVisible() }}
+                  onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
+                  onMouseOut={hideSubnavigation}
+                >
+                  {t('Knowledge base')}
+                </a>
               </li>
             </ul>
           </div>
@@ -186,7 +253,217 @@ export const Header = (props: Props) => {
               <div />
             </div>
           </div>
+
+          <div
+            class={clsx(styles.subnavigation, 'col')}
+            classList={{ hidden: !isKnowledgeBaseVisible() }}
+            onMouseOver={clearTimer}
+            onMouseOut={hideSubnavigation}
+          >
+            <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() }}
+            onMouseOver={clearTimer}
+            onMouseOut={hideSubnavigation}
+          >
+            <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() }}
+            onMouseOver={clearTimer}
+            onMouseOut={hideSubnavigation}
+          >
+            <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() }}
+            onMouseOver={clearTimer}
+            onMouseOut={hideSubnavigation}
+          >
+            <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>

src/components/Nav/HeaderAuth.tsx

@@ -107,8 +107,11 @@ export const HeaderAuth = (props: Props) => {
   return (
     <ShowOnlyOnClient>
       <Show when={isSessionLoaded()} keyed={true}>
-        <div class={clsx(styles.usernav, 'col')} classList={{ [styles.usernavEditor]: showSaveButton() }}>
-          <div class={clsx(styles.userControl, styles.userControl, 'col')}>
+        <div
+          class={clsx('col-sm-6 col-lg-7', styles.usernav)}
+          classList={{ [styles.usernavEditor]: showSaveButton() }}
+        >
+          <div class={styles.userControl}>
             <Show when={showCreatePostButton()}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 <a href={getPagePath(router, 'create')}>

src/pages/about/guide.page.tsx

@@ -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>
 

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 {