Main menu mobile (#217)

* Main menu mobile --------- Co-authored-by: ilya-bkv <i.yablokov@ccmp.me>
2023-09-16 09:38:56 +03:00 · 2023-09-16 09:38:56 +03:00 · b127432ba9
commit b127432ba9
parent 8e4dda24ae
6 changed files with 230 additions and 70 deletions
--- a/public/locales/en/translation.json
+++ b/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",
--- a/public/locales/ru/translation.json
+++ b/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": "Подпишитесь на&nbsp;нас",
  "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": "все темы",
--- a/src/components/Nav/Header/Header.module.scss
+++ b/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) {
-    :global(.fixed) & {
-      font-size: 2.2rem !important;
-
-      &,
-      li {
-        display: block !important;
-      }
+  @include media-breakpoint-up(md) {
+    a,
+    button {
+      padding: 0 0.4rem;
    }
  }

-  a,
-  button {
-    padding: 0 0.4rem;
+  ul {
+    margin-top: 0;
  }

  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 {
--- a/src/components/Nav/Header/Header.tsx
+++ b/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() }}>
-              <li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
-                <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
-                  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
-                  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 class={clsx(styles.mainNavigation, { [styles.fixed]: fixed() })}>
+              <ul class="view-switcher">
+                <li classList={{ 'view-switcher__item--selected': page().route === 'home' }}>
+                  <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
+                    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
+                    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 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">
--- a/src/components/_shared/GrowingTextarea/GrowingTextarea.tsx
+++ b/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
--- a/src/pages/profile/profileSettings.page.tsx
+++ b/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()