Mobile navigation fixes

public/locales/en/translation.json

@@ -100,6 +100,7 @@
   "Discours is created with our common effort": "Discours exists because of our common effort",
   "Discussing": "Discussing",
   "Discussion rules": "Discussion rules",
+  "Discussion rules in social networks": "Discussion rules",
   "Discussions": "Discussions",
   "Dogma": "Dogma",
   "Draft successfully deleted": "Draft successfully deleted",
@@ -183,6 +184,7 @@
   "Just start typing...": "Just start typing...",
   "Knowledge base": "Knowledge base",
   "Last rev.": "Посл. изм.",
+  "Language": "Language",
   "Let's log in": "Let's log in",
   "Link copied": "Link copied",
   "Link sent, check your email": "Link sent, check your email",
@@ -308,6 +310,7 @@
   "Success": "Success",
   "Successfully authorized": "Authorization successful",
   "Suggest an idea": "Suggest an idea",
+  "Support the project": "Support the project",
   "Support us": "Help the magazine",
   "Terms of use": "Site rules",
   "Text checking": "Text checking",

public/locales/ru/translation.json

@@ -103,7 +103,8 @@
   "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Дискурс&#160;&#8212; это интеллектуальная среда, веб-пространство и&#160;инструменты, которые позволяют авторам сотрудничать&#160;с&#160;читателями и&#160;объединяться для совместного создания публикаций и&#160;медиапроектов.<br/>Мы&#160;убеждены, один голос хорошо, а&#160;много&#160;&#8212; лучше. Самые потрясающиe истории мы создаём вместе.",
   "Discours is created with our common effort": "Дискурс существует благодаря нашему общему вкладу",
   "Discussing": "Обсуждаемое",
-  "Discussion rules": "Правила сообществ самиздата в&nbsp;соцсетях",
+  "Discussion rules": "Правила дискуссий",
+  "Discussion rules in social networks": "Правила сообществ самиздата в&nbsp;соцсетях",
   "Discussions": "Дискуссии",
   "Dogma": "Догма",
   "Draft successfully deleted": "Черновик успешно удален",
@@ -192,6 +193,7 @@
   "Just start typing...": "Просто начните печатать...",
   "Karma": "Карма",
   "Knowledge base": "База знаний",
+  "Language": "Язык",
   "Last rev.": "Посл. изм.",
   "Let's log in": "Давайте авторизуемся",
   "Link copied": "Ссылка скопирована",
@@ -327,6 +329,7 @@
   "Success": "Успешно",
   "Successfully authorized": "Авторизация успешна",
   "Suggest an idea": "Предложить идею",
+  "Support the project": "Поддержать проект",
   "Support us": "Помочь журналу",
   "Terms of use": "Правила сайта",
   "Text checking": "Проверка текста",

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

@@ -74,8 +74,11 @@
 
   img {
     height: 20px;
+    margin-top: 0.3rem;
     object-fit: contain;
     object-position: left;
+    position: relative;
+    top: 0.3rem;
     transition: height 0.2s;
     vertical-align: middle;
     width: 100px;
@@ -155,7 +158,7 @@
         display: block;
         font-size: 3.2rem !important;
         font-weight: bold;
-        margin: 0 0 5rem;
+        margin: 0 0 4rem;
       }
 
       li {
@@ -192,8 +195,9 @@
   }
 
   :global(.view-switcher) {
-    margin-top: 0;
+    margin: 0 -0.5rem;
     overflow: hidden;
+    padding: 0;
   }
 
   li {
@@ -224,20 +228,51 @@
   }
 }
 
-.mainNavigationSocial a {
+.mainNavigationSocial {
-  display: flex;
+  font-size: 2rem;
-  justify-content: space-between;
+  font-weight: 500;
+
+  .mainNavigation .mainNavigationMobile & {
+    margin-bottom: 0 !important;
+  }
+
+  a {
+    align-items: center;
+    display: flex;
+
+    &:hover {
+      .icon {
+        filter: invert(1);
+      }
+    }
 
-  &:hover {
     .icon {
-      filter: invert(1);
+      height: 3.8rem;
+      margin-right: 0.3em;
+      width: 3.8rem;
     }
   }
+}
 
-  .icon {
+.languageSelectorMobile {
-    height: 3.8rem;
+  border: 2px solid #e8e8e8;
-    width: 3.8rem;
+  border-radius: 1.6rem;
-  }
+  display: block;
+  font-family: inherit;
+  font-size: 1.7rem;
+  height: 5.6rem;
+  margin-bottom: 5rem;
+  padding: 0 1.2rem;
+  width: 100%;
+}
+
+.mainNavigationAdditionalLinks {
+  border-top: 1px solid #ccc;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.6rem 0 2rem;
 }
 
 .mobileDescription {

src/components/Nav/Header/Header.tsx

@@ -227,16 +227,16 @@ export const Header = (props: Props) => {
               </ul>
 
               <div class={styles.mainNavigationMobile}>
-                <h4>{t('Join the community')}</h4>
+                <h4>{t('Participating')}</h4>
                 <ul class="view-switcher">
                   <li>
                     <a href="/create">{t('Create post')}</a>
                   </li>
                   <li>
-                    <a href="/about/manifest#participation">{t('Support us')}</a>
+                    <a href="/connect">{t('Suggest an idea')}</a>
                   </li>
                   <li>
-                    <a href="/about/help">{t('How to help')}</a>
+                    <a href="/about/help">{t('Support the project')}</a>
                   </li>
                 </ul>
 
@@ -244,44 +244,57 @@ export const Header = (props: Props) => {
                 <ul class="view-switcher">
                   <li class={styles.mainNavigationSocial}>
                     <a href="https://www.instagram.com/discoursio/">
-                      Instagram
                       <Icon name="user-link-instagram" class={styles.icon} />
+                      Instagram
                     </a>
                   </li>
                   <li class={styles.mainNavigationSocial}>
                     <a href="https://facebook.com/discoursio">
-                      Facebook
                       <Icon name="user-link-facebook" class={styles.icon} />
+                      Facebook
                     </a>
                   </li>
                   <li class={styles.mainNavigationSocial}>
                     <a href="https://twitter.com/discours_io">
-                      Twitter
                       <Icon name="user-link-twitter" class={styles.icon} />
+                      Twitter
                     </a>
                   </li>
                   <li class={styles.mainNavigationSocial}>
                     <a href="https://t.me/discoursio">
-                      Telegram
                       <Icon name="user-link-telegram" class={styles.icon} />
+                      Telegram
                     </a>
                   </li>
                   <li class={styles.mainNavigationSocial}>
                     <a href="https://dzen.ru/discoursio">
-                      Dzen
                       <Icon name="user-link-dzen" class={styles.icon} />
+                      Dzen
                     </a>
                   </li>
                   <li class={styles.mainNavigationSocial}>
                     <a href="https://vk.com/discoursio">
-                      VK
                       <Icon name="user-link-vk" class={styles.icon} />
+                      VK
                     </a>
                   </li>
                 </ul>
 
                 <h4>{t('Newsletter')}</h4>
                 <Subscribe variant={'mobileSubscription'} />
+
+                <h4>{t('Newsletter')}</h4>
+                <select class={styles.languageSelectorMobile}>
+                  <option value="ru">🇷🇺 Русский</option>
+                  <option value="en">🇬🇧 English</option>
+                </select>
+
+                <div class={styles.mainNavigationAdditionalLinks}>
+                  <a href="/about/dogma">{t('Dogma')}</a>
+                  <a href="/about/discussion-rules" innerHTML={t('Discussion rules')} />
+                  <a href="/about/principles">{t('Principles')}</a>
+                </div>
+
                 <p
                   class={styles.mobileDescription}
                   innerHTML={t(

src/components/Nav/HeaderAuth.tsx

@@ -140,6 +140,15 @@ export const HeaderAuth = (props: Props) => {
               </div>
             </Show>
 
+            <Show when={!session()}>
+              <div class={styles.userControlItem} onClick={handleBellIconClick}>
+                <div class={styles.button}>
+                  <Icon name="bell-white" counter="1" class={styles.icon} />
+                  <Icon name="bell-white-hover" counter="1" class={clsx(styles.icon, styles.iconHover)} />
+                </div>
+              </div>
+            </Show>
+
             <Show when={isSaveButtonVisible()}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
                 {renderIconedButton({

src/components/_shared/Subscribe/Subscribe.tsx

@@ -106,6 +106,7 @@ export const Subscribe = (props: Props) => {
               <Icon name="arrow-right" />
             </button>
           </div>
+          <div class="description">Подпишитесь на рассылку лучших публикаций</div>
         </Show>
         <Show when={emailError()}>
           <div class={styles.error}>{emailError()}</div>

src/pages/about/discussionRules.page.tsx

@@ -4,7 +4,7 @@ import { Title } from '@solidjs/meta'
 
 export const DiscussionRulesPage = () => {
   const { t } = useLocalize()
-  const title = t('Discussion rules')
+  const title = t('Discussion rules in social networks')
   return (
     <PageLayout>
       <Title>{title}</Title>

src/pages/about/principles.page.tsx

@@ -61,7 +61,7 @@ export const PrinciplesPage = () => {
             </ol>
 
             <h2 class="h2" id="participation">
-              <span class="wrapped">Как участвовать в&nbsp;самиздате</span>
+              <span class="wrapped">Как у&nbsp;нас принято себя вести</span>
             </h2>
 
             <p>

src/styles/app.scss

@@ -987,8 +987,11 @@ details {
 
 .description {
   @include font-size(1.4rem);
-
   color: rgba(0 0 0 / 40%);
+
+  .pretty-form__item + & {
+    margin-top: -2rem;
+  }
 }
 
 [data-custom-scroll='on'] {