Mobile style fixes

public/icons/key.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M6 0.25C2.87109 0.25 0.375 2.76758 0.375 5.875C0.375 8.0332 1.5918 9.9043 3.375 10.8477V17.3809C3.375 17.791 3.5625 18.1777 3.88477 18.4336L5.24219 19.5059C5.44727 19.6699 5.69531 19.75 5.94141 19.75C6.2168 19.75 6.49219 19.6484 6.70898 19.4492L9.15625 17.1797C9.33789 17.0117 9.39062 16.7461 9.28906 16.5215L8.625 15.0586V15.0234L9.52734 13.9043C9.79688 13.5684 9.8125 13.0918 9.56055 12.7402L8.625 11.4316V10.8477C10.4082 9.9043 11.625 8.0332 11.625 5.875C11.625 2.76758 9.12891 0.25 6 0.25ZM6 1.75C8.27344 1.75 10.125 3.60156 10.125 5.875C10.125 7.40625 9.28125 8.80469 7.92383 9.52148L7.125 9.94336V11.9121L8.10352 13.2812L7.125 14.4941V15.3828L7.64648 16.5332L5.92383 18.1328L4.97852 17.3848C4.91211 17.334 4.875 17.2559 4.875 17.1719V9.94336L4.07617 9.52148C2.71875 8.80469 1.875 7.40625 1.875 5.875C1.875 3.60156 3.72656 1.75 6 1.75ZM6 3.25C5.17188 3.25 4.5 3.92188 4.5 4.75C4.5 5.57812 5.17188 6.25 6 6.25C6.82812 6.25 7.5 5.57812 7.5 4.75C7.5 3.92188 6.82812 3.25 6 3.25Z" fill="currentColor"/>
+</svg>

src/components/Feed/Sidebar/Sidebar.module.scss

@@ -1,9 +1,11 @@
 .sidebar {
+  margin-top: -0.7rem;
   max-height: calc(100vh - 120px);
   overflow: auto;
   top: 120px;
 
   @include media-breakpoint-up(md) {
+    margin-top: 0;
     position: sticky;
 
     ul > li {

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

@@ -104,9 +104,9 @@
   position: relative;
 
   @include media-breakpoint-down(lg) {
-    flex: 1 !important;
     max-width: 100% !important;
-    padding: 0 !important;
+    position: absolute;
+    right: 0;
   }
 }
 
@@ -139,7 +139,7 @@
     overflow: auto;
     padding: $container-padding-x !important;
     position: fixed;
-    top: 64px;
+    top: 58px;
     width: 100%;
     z-index: 1;
 
@@ -191,8 +191,9 @@
     }
   }
 
-  ul {
+  :global(.view-switcher) {
     margin-top: 0;
+    overflow: hidden;
   }
 
   li {
@@ -217,6 +218,10 @@
   .fixed & {
     display: block;
   }
+
+  a {
+    padding-top: 0.1em;
+  }
 }
 
 .mainNavigationSocial a {
@@ -246,6 +251,30 @@
     background: #f7f7f8;
     border: none;
     border-radius: 1.6rem;
+    padding-right: 5.6rem;
+
+    &:not(:placeholder-shown) {
+      & ~ .mobileSubscriptionSubmit {
+        display: block;
+      }
+    }
+  }
+}
+
+.mobileSubscriptionSubmit {
+  aspect-ratio: 1/1;
+  display: none;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  img {
+    aspect-ratio: 1/1;
+    left: 50%;
+    position: relative;
+    transform: translateX(-50%);
+    width: 16px !important;
   }
 }
 
@@ -387,19 +416,11 @@
   display: flex;
   justify-content: flex-end;
   position: absolute;
-  right: 5rem;
+  right: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
 
-  @include media-breakpoint-up(lg) {
-    right: 0;
-  }
-
-  @include media-breakpoint-up(xl) {
-    right: 2rem;
-  }
-
   .control {
     cursor: pointer;
     border: 0;
@@ -446,10 +467,6 @@
     z-index: -1;
   }
 
-  @include media-breakpoint-down(md) {
-    padding: divide($container-padding-x, 2);
-  }
-
   .userpic {
     align-items: center;
     margin-right: 0;
@@ -534,6 +551,8 @@
   }
 
   &:global(.loginbtn) {
+    background: #e9e9ee;
+
     .icon {
       height: 2.4rem;
       width: 2.4rem;

src/components/Nav/Header/Header.tsx

@@ -173,6 +173,11 @@ export const Header = (props: Props) => {
 
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
         <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
+          <div class={clsx(styles.burgerContainer, 'col-auto')}>
+            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
+              <div />
+            </div>
+          </div>
           <div class={clsx('col-md-5 col-xl-4 col-auto', styles.mainLogo)}>
             <a href={getPagePath(router, 'home')}>
               <img src="/logo.svg" alt={t('Discours')} />
@@ -278,6 +283,9 @@ export const Header = (props: Props) => {
                   <div class="pretty-form__item">
                     <input type="email" placeholder="Ваш email" id="subscription-email" />
                     <label for="subscription-email">{t('Your email')}</label>
+                    <button class={styles.mobileSubscriptionSubmit}>
+                      <Icon name="arrow-right" />
+                    </button>
                   </div>
                 </form>
 
@@ -327,11 +335,6 @@ export const Header = (props: Props) => {
               </a>
             </div>
           </Show>
-          <div class={clsx(styles.burgerContainer, 'col-auto')}>
-            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
-              <div />
-            </div>
-          </div>
 
           <div
             class={clsx(styles.subnavigation, 'col')}

src/components/Nav/HeaderAuth.tsx

@@ -108,7 +108,7 @@ export const HeaderAuth = (props: Props) => {
   return (
     <ShowOnlyOnClient>
       <Show when={isSessionLoaded()} keyed={true}>
-        <div class={clsx('col-sm-6 col-lg-7', styles.usernav)}>
+        <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
             <Show when={isCreatePostButtonVisible()}>
               <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
@@ -175,7 +175,7 @@ export const HeaderAuth = (props: Props) => {
                 <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                   <a href="?modal=auth&mode=login">
                     <span class={styles.textLabel}>{t('Enter')}</span>
-                    <Icon name="user-default" class={styles.icon} />
+                    <Icon name="key" class={styles.icon} />
                     {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
                   </a>
                 </div>

src/components/Nav/Topics/Topics.module.scss

@@ -1,6 +1,5 @@
 .Topics {
-  @include font-size(1.4rem);
-
+  font-size: 1.6rem;
   height: 6rem;
   line-height: 6rem;
   margin-bottom: 3rem;
@@ -12,32 +11,68 @@
     padding: 0 divide($container-padding-x, 2);
   }
 
+  @include media-breakpoint-up(md) {
+    @include font-size(1.4rem);
+  }
+
   .list {
     display: flex;
-    flex-wrap: wrap;
     font-weight: 500;
     list-style: none;
     margin-top: 0;
-    padding: 0 7em 0 0;
+    overflow: auto;
+    padding: 0;
     position: relative;
+
+    @include media-breakpoint-up(lg) {
+      flex-wrap: wrap;
+      overflow: hidden;
+      padding-right: 7em;
+    }
   }
 
   .item {
     margin-right: 2.4rem;
 
     &.right {
+      display: none;
       margin-right: 0;
       position: absolute;
       right: 0;
       top: 0;
+      white-space: nowrap;
+
+      @include media-breakpoint-up(lg) {
+        display: block;
+      }
+
+      :global(.icon) {
+        display: inline-block;
+        margin-left: 0.3em;
+        top: 0.15em;
+      }
     }
 
     a {
       border-bottom: unset;
+
       &.selected {
         font-weight: 500;
         border-bottom: 2px solid var(--default-color);
       }
+
+      &:hover {
+        .icon {
+          filter: invert(1);
+        }
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      margin-left: 0.3em;
+      position: relative;
+      top: 0.15em;
     }
   }
 }

src/components/Views/Feed.module.scss

@@ -1,5 +1,6 @@
 .feedFilter {
-  margin: 0.2em 0 4.8rem;
+  margin-bottom: 4.8rem;
+  margin-top: 0.2em;
 
   @include media-breakpoint-down(md) {
     margin-right: 4rem !important;

src/styles/app.scss

@@ -589,18 +589,22 @@ figure {
 
 .view-switcher {
   @include font-size(1.4rem);
-
   display: flex;
-  flex-wrap: wrap;
   font-weight: 500;
   list-style: none;
-  margin: 3.6rem 0 0;
-  padding: 0;
+  margin: 3.6rem -1rem 0;
+  overflow: auto;
+  padding: 0 1rem;
+
+  @include media-breakpoint-up(md) {
+    flex-wrap: wrap;
+  }
 
   li {
     display: inline-block;
     margin-right: 2rem;
     margin-bottom: 0.6em;
+    white-space: nowrap;
 
     &:last-child {
       margin-right: 0;