Main menu mobile (#217)

* Main menu mobile
---------

Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>

public/locales/en/translation.json

@@ -152,6 +152,7 @@
   "Hot topics": "Hot topics",
   "Hotkeys": "Горячие клавиши",
   "How can I help/skills": "How can I help/skills",
+  "How to help": "How to help?",
   "How it works": "How it works",
   "How to write a good article": "Как написать хорошую статью",
   "How to write an article": "How to write an article",
@@ -199,6 +200,7 @@
   "My feed": "My feed",
   "My subscriptions": "Subscriptions",
   "Name": "Name",
+  "Newsletter": "Newsletter",
   "New literary work": "New literary work",
   "New only": "New only",
   "New password": "New password",
@@ -283,6 +285,7 @@
   "Subscribe": "Subscribe",
   "Subscribe what you like to tune your personal feed": "Subscribe to topics that interest you to customize your personal feed and get instant updates on new posts and discussions",
   "Subscribe who you like to tune your personal feed": "Subscribe to authors you're interested in to customize your personal feed and get instant updates on new posts and discussions",
+  "Subscribe us": "Subscribe us",
   "Subscription": "Subscription",
   "Subscriptions": "Subscriptions",
   "Substrate": "Substrate",
@@ -347,6 +350,7 @@
   "You've confirmed email": "You've confirmed email",
   "You've reached a non-existed page": "You've reached a non-existed page",
   "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Your name will appear on your profile page and as your signature in publications, comments and responses",
+  "Your email": "Your email",
   "accomplices": "accomplices",
   "actions": "actions",
   "add link": "add link",

public/locales/ru/translation.json

@@ -160,6 +160,7 @@
   "Hotkeys": "Горячие клавиши",
   "How can I help/skills": "Чем могу помочь/навыки",
   "How it works": "Как это работает",
+  "How to help": "Как помочь?",
   "How to write a good article": "Как написать хорошую статью",
   "How to write an article": "Как написать статью",
   "I have an account": "У меня есть аккаунт!",
@@ -208,6 +209,7 @@
   "My feed": "Моя лента",
   "My subscriptions": "Подписки",
   "Name": "Имя",
+  "Newsletter": "Рассылка",
   "New literary work": "Новое произведение",
   "New only": "Только новые",
   "New password": "Новый пароль",
@@ -300,6 +302,7 @@
   "Subscribe to comments": "Подписаться на комментарии",
   "Subscribe what you like to tune your personal feed": "Подпишитесь на интересующие вас темы, чтобы настроить вашу персональную ленту и моментально узнавать о новых публикациях и обсуждениях",
   "Subscribe who you like to tune your personal feed": "Подпишитесь на интересующих вас авторов, чтобы настроить вашу персональную ленту и моментально узнавать о новых публикациях и обсуждениях",
+  "Subscribe us": "Подпишитесь на нас",
   "Subscription": "Подписка",
   "subscription": "подписка",
   "Subscriptions": "Подписки",
@@ -367,6 +370,7 @@
   "You've reached a non-existed page": "Вы попали на несуществующую страницу",
   "You've successfully logged out": "Вы успешно вышли из аккаунта",
   "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Ваше имя появится на странице вашего профиля и как ваша подпись в публикациях, комментариях и откликах",
+  "Your email": "Ваш email",
   "actions": "действия",
   "add link": "добавить ссылку",
   "all topics": "все темы",

src/components/Nav/Header/Header.module.scss

@@ -56,6 +56,10 @@
     margin: 0;
     padding: 0;
     z-index: 9;
+
+    @include media-breakpoint-down(md) {
+      border-bottom: 2px solid #000;
+    }
   }
 }
 
@@ -121,8 +125,9 @@
 
 .mainNavigation {
   font-size: 1.4rem !important;
-  margin: 0 0 0 -0.4rem !important;
+  //margin: 0 0 0 -0.4rem !important;
   opacity: 1;
+  overflow: auto;
   transition: opacity 0.3s;
 
   @include media-breakpoint-down(md) {
@@ -130,37 +135,64 @@
     bottom: 0;
     display: none;
     font-size: 2.6rem;
-    font-weight: bold;
+    font-weight: 500;
     left: 0;
     padding: $container-padding-x !important;
     position: fixed;
-    top: 74px;
+    top: 64px;
     width: 100%;
     z-index: 1;
 
     li {
       margin-bottom: 2.4rem !important;
     }
+
+    &.fixed {
+      display: block !important;
+      line-height: 1.1;
+
+      ul {
+        display: block;
+        font-size: 3.2rem !important;
+        font-weight: bold;
+        margin: 0 0 5rem;
+      }
+
+      li {
+        display: block !important;
+        margin: 0 0 1.5rem !important;
+      }
+
+      a,
+      button {
+        border: none !important;
+      }
+
+      .mobileCopyright {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+
+        a {
+          border-bottom: 1px solid !important;
+        }
+      }
+    }
   }
 
   @include media-breakpoint-down(sm) {
     padding: divide($container-padding-x, 2) !important;
   }
 
-  @include media-breakpoint-down(md) {
+  @include media-breakpoint-up(md) {
-    :global(.fixed) & {
+    a,
-      font-size: 2.2rem !important;
+    button {
-
+      padding: 0 0.4rem;
-      &,
-      li {
-        display: block !important;
-      }
     }
   }
 
-  a,
+  ul {
-  button {
+    margin-top: 0;
-    padding: 0 0.4rem;
   }
 
   li {
@@ -170,6 +202,51 @@
       text-transform: capitalize;
     }
   }
+
+  h4 {
+    color: #9fa1a7;
+    font-size: 1.4rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+}
+
+.mainNavigationMobile {
+  display: none;
+
+  .fixed & {
+    display: block;
+  }
+}
+
+.mainNavigationSocial a {
+  display: flex;
+  justify-content: space-between;
+
+  &:hover {
+    .icon {
+      filter: invert(1);
+    }
+  }
+
+  .icon {
+    height: 3.8rem;
+    width: 3.8rem;
+  }
+}
+
+.mobileDescription {
+  color: #696969;
+}
+
+.mobileSubscription {
+  margin-bottom: 5rem;
+
+  input[type='email'] {
+    background: #f7f7f8;
+    border: none;
+    border-radius: 1.6rem;
+  }
 }
 
 .mainNavigationItemActive {

src/components/Nav/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { For, Show, createSignal, createEffect, onMount, onCleanup } from 'solid-js'
+import { Show, createSignal, createEffect, onMount, onCleanup, For } from 'solid-js'
 import { getPagePath, redirectPage } from '@nanostores/router'
 import { clsx } from 'clsx'
 
@@ -175,56 +175,132 @@ export const Header = (props: Props) => {
             <Show when={props.title}>
               <div class={styles.articleHeader}>{props.title}</div>
             </Show>
-            <ul class={clsx('view-switcher', styles.mainNavigation)} classList={{ fixed: fixed() }}>
+            <div class={clsx(styles.mainNavigation, { [styles.fixed]: fixed() })}>
-              <li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
+              <ul class="view-switcher">
-                <a
+                <li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
-                  classList={{ [styles.mainNavigationItemActive]: isZineVisible() }}
+                  <a
-                  onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
+                    classList={{ [styles.mainNavigationItemActive]: isZineVisible() }}
-                  onMouseOut={hideSubnavigation}
+                    onMouseOver={() => toggleSubnavigation(true, setIsZineVisible)}
-                  href={getPagePath(router, 'home')}
+                    onMouseOut={hideSubnavigation}
-                >
+                    href={getPagePath(router, 'home')}
-                  {t('zine')}
+                  >
-                </a>
+                    {t('zine')}
-              </li>
+                  </a>
-              <li classList={{ 'view-switcher__item--selected': page().route.startsWith('feed') }}>
+                </li>
-                <a
+                <li classList={{ 'view-switcher__item--selected': page().route.startsWith('feed') }}>
-                  classList={{ [styles.mainNavigationItemActive]: isFeedVisible() }}
+                  <a
-                  onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
+                    classList={{ [styles.mainNavigationItemActive]: isFeedVisible() }}
-                  onMouseOut={hideSubnavigation}
+                    onMouseOver={() => toggleSubnavigation(true, setIsFeedVisible)}
-                  href={getPagePath(router, 'feed')}
+                    onMouseOut={hideSubnavigation}
-                >
+                    href={getPagePath(router, 'feed')}
-                  {t('feed')}
+                  >
-                </a>
+                    {t('feed')}
-              </li>
+                  </a>
-              <li classList={{ 'view-switcher__item--selected': page().route === 'topics' }}>
+                </li>
-                <a
+                <li classList={{ 'view-switcher__item--selected': page().route === 'topics' }}>
-                  classList={{ [styles.mainNavigationItemActive]: isTopicsVisible() }}
+                  <a
-                  onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
+                    classList={{ [styles.mainNavigationItemActive]: isTopicsVisible() }}
-                  onMouseOut={hideSubnavigation}
+                    onMouseOver={() => toggleSubnavigation(true, setIsTopicsVisible)}
-                  href={getPagePath(router, 'topics')}
+                    onMouseOut={hideSubnavigation}
-                >
+                    href={getPagePath(router, 'topics')}
-                  {t('topics')}
+                  >
-                </a>
+                    {t('topics')}
-              </li>
+                  </a>
-              <li classList={{ 'view-switcher__item--selected': page().route === 'authors' }}>
+                </li>
-                <a
+                <li classList={{ 'view-switcher__item--selected': page().route === 'authors' }}>
-                  onMouseOver={(ev) => hideSubnavigation(ev, 0)}
+                  <a
-                  onMouseOut={(ev) => hideSubnavigation(ev, 0)}
+                    onMouseOver={(ev) => hideSubnavigation(ev, 0)}
-                  href={getPagePath(router, 'authors')}
+                    onMouseOut={(ev) => hideSubnavigation(ev, 0)}
-                >
+                    href={getPagePath(router, 'authors')}
-                  {t('community')}
+                  >
-                </a>
+                    {t('community')}
-              </li>
+                  </a>
-              <li>
+                </li>
-                <a
+                <li>
-                  classList={{ [styles.mainNavigationItemActive]: isKnowledgeBaseVisible() }}
+                  <a
-                  onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
+                    classList={{ [styles.mainNavigationItemActive]: isKnowledgeBaseVisible() }}
-                  onMouseOut={hideSubnavigation}
+                    onMouseOver={() => toggleSubnavigation(true, setIsKnowledgeBaseVisible)}
-                >
+                    onMouseOut={hideSubnavigation}
-                  {t('Knowledge base')}
+                  >
-                </a>
+                    {t('Knowledge base')}
-              </li>
+                  </a>
-            </ul>
+                </li>
+              </ul>
+
+              <div class={styles.mainNavigationMobile}>
+                <h4>{t('Join the community')}</h4>
+                <ul class="view-switcher">
+                  <li>
+                    <a href="/create">{t('Create post')}</a>
+                  </li>
+                  <li>
+                    <a href="/about/manifest#participation">{t('Support us')}</a>
+                  </li>
+                  <li>
+                    <a href="/about/help">{t('How to help')}</a>
+                  </li>
+                </ul>
+
+                <h4 innerHTML={t('Subscribe us')} />
+                <ul class="view-switcher">
+                  <li class={styles.mainNavigationSocial}>
+                    <a href="https://www.instagram.com/discoursio/">
+                      Instagram
+                      <Icon name="user-link-instagram" class={styles.icon} />
+                    </a>
+                  </li>
+                  <li class={styles.mainNavigationSocial}>
+                    <a href="https://facebook.com/discoursio">
+                      Facebook
+                      <Icon name="user-link-facebook" class={styles.icon} />
+                    </a>
+                  </li>
+                  <li class={styles.mainNavigationSocial}>
+                    <a href="https://twitter.com/discours_io">
+                      Twitter
+                      <Icon name="user-link-twitter" class={styles.icon} />
+                    </a>
+                  </li>
+                  <li class={styles.mainNavigationSocial}>
+                    <a href="https://t.me/discoursio">
+                      Telegram
+                      <Icon name="user-link-telegram" class={styles.icon} />
+                    </a>
+                  </li>
+                  <li class={styles.mainNavigationSocial}>
+                    <a href="https://dzen.ru/discoursio">
+                      Dzen
+                      <Icon name="user-link-dzen" class={styles.icon} />
+                    </a>
+                  </li>
+                  <li class={styles.mainNavigationSocial}>
+                    <a href="https://vk.com/discoursio">
+                      VK
+                      <Icon name="user-link-vk" class={styles.icon} />
+                    </a>
+                  </li>
+                </ul>
+
+                <h4>{t('Newsletter')}</h4>
+                <form action="." class={styles.mobileSubscription}>
+                  <div class="pretty-form__item">
+                    <input type="email" placeholder="Ваш email" id="subscription-email" />
+                    <label for="subscription-email">{t('Your email')}</label>
+                  </div>
+                </form>
+
+                <p
+                  class={styles.mobileDescription}
+                  innerHTML={t(
+                    'Independant magazine with an open horizontal cooperation about culture, science and society'
+                  )}
+                />
+                <div class={styles.mobileCopyright}>
+                  {t('Discours')} &copy; 2015&ndash;{new Date().getFullYear()}{' '}
+                  <a href="/">{t('Terms of use')}</a>
+                </div>
+              </div>
+            </div>
           </div>
           <HeaderAuth setIsProfilePopupVisible={setIsProfilePopupVisible} />
           <Show when={props.title}>
@@ -285,10 +361,10 @@ export const Header = (props: Props) => {
                 <a href="/about/guide">Гид по дискурсу</a>
               </li>
               <li>
-                <a href="/about/manifest#participation">Как поддержать?</a>
+                <a href="/about/manifest#participation">{t('Support us')}</a>
               </li>
               <li>
-                <a href="/about/help">Как помочь?</a>
+                <a href="/about/help">{t('How to help')}</a>
               </li>
               <li class={styles.rightItem}>
                 <a href="/connect">

src/components/_shared/GrowingTextarea/GrowingTextarea.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx'
 import styles from './GrowingTextarea.module.scss'
-import { createEffect, createSignal, onMount, Show } from 'solid-js'
+import { createEffect, createSignal, Show } from 'solid-js'
 
 type Props = {
   class?: string

src/pages/profile/profileSettings.page.tsx

@@ -1,7 +1,7 @@
 import { PageLayout } from '../../components/_shared/PageLayout'
 import { Icon } from '../../components/_shared/Icon'
 import ProfileSettingsNavigation from '../../components/Discours/ProfileSettingsNavigation'
-import { For, createSignal, Show, onMount, onCleanup, createEffect, on } from 'solid-js'
+import { For, createSignal, Show, onMount, onCleanup, createEffect } from 'solid-js'
 import deepEqual from 'fast-deep-equal'
 import { clsx } from 'clsx'
 import styles from './Settings.module.scss'
@@ -18,7 +18,6 @@ import { createStore } from 'solid-js/store'
 import { clone } from '../../utils/clone'
 import SimplifiedEditor from '../../components/Editor/SimplifiedEditor'
 import { GrowingTextarea } from '../../components/_shared/GrowingTextarea'
-import { resetSortedArticles } from '../../stores/zine/articles'
 
 export const ProfileSettingsPage = () => {
   const { t } = useLocalize()