From 53f71ce92fb8822b8685f2170b595d70e68eb221 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 29 Sep 2022 00:08:14 +0300
Subject: [PATCH 01/11] Module css in the header component

---
 .../Nav/{Header.scss => Header.module.scss}       | 12 ++++++------
 src/components/Nav/Header.tsx                     | 15 ++++++++-------
 src/styles/FourOuFour.module.scss                 |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)
 rename src/components/Nav/{Header.scss => Header.module.scss} (97%)

diff --git a/src/components/Nav/Header.scss b/src/components/Nav/Header.module.scss
similarity index 97%
rename from src/components/Nav/Header.scss
rename to src/components/Nav/Header.module.scss
index b4c922a6..5a822699 100644
--- a/src/components/Nav/Header.scss
+++ b/src/components/Nav/Header.module.scss
@@ -1,4 +1,4 @@
-header {
+.mainHeader {
   background: #fff;
   margin-bottom: 2.2rem;
   width: 100%;
@@ -13,7 +13,7 @@ header {
   }
 }
 
-.header--fixed {
+.headerFixed {
   position: fixed;
   top: 0;
 
@@ -26,7 +26,7 @@ header {
   }
 }
 
-.header__inner {
+.headerInner {
   background: #fff;
   border-bottom: 4px solid #000;
   flex-wrap: nowrap;
@@ -48,7 +48,7 @@ header {
   }
 }
 
-.main-logo {
+.mainLogo {
   align-items: center;
   display: inline-flex;
   height: 70px;
@@ -101,7 +101,7 @@ nav {
   }
 }
 
-.main-navigation {
+.mainNavigation {
   position: relative;
   @include font-size(1.7rem);
 
@@ -264,7 +264,7 @@ nav {
   }
 }
 
-.header__search {
+.headerSearch {
   text-transform: lowercase;
 
   .icon {
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 2e4728f5..23ed385c 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -9,9 +9,10 @@ import { useModalStore, showModal, useWarningsStore } from '../../stores/ui'
 import { useStore } from '@nanostores/solid'
 import { session as ssession } from '../../stores/auth'
 import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router'
-import './Header.scss'
+import styles from './Header.module.scss'
 import { getPagePath } from '@nanostores/router'
 import { getLogger } from '../../utils/logger'
+import { clsx } from 'clsx'
 
 const log = getLogger('header')
 
@@ -84,9 +85,9 @@ export const Header = (props: Props) => {
 
   return (
     <header
-      class="main-header"
+      class={styles.mainHeader}
       classList={{
-        ['header--fixed']: props.isHeaderFixed,
+        [styles.headerFixed]: props.isHeaderFixed,
         ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
         ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
       }}
@@ -95,13 +96,13 @@ export const Header = (props: Props) => {
         <AuthModal />
       </Modal>
       <div class="wide-container">
-        <nav class="row header__inner" classList={{ fixed: fixed() }}>
-          <div class="main-logo col-auto">
+        <nav class={clsx(styles.headerInner, 'row')} classList={{ fixed: fixed() }}>
+          <div class={clsx(styles.mainLogo, 'col-auto')}>
             <a href={getPagePath(router, 'home')} onClick={handleClientRouteLinkClick}>
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <div class="col main-navigation">
+          <div class={clsx(styles.mainNavigation, 'col')}>
             <div class="article-header">{props.title}</div>
 
             <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
@@ -114,7 +115,7 @@ export const Header = (props: Props) => {
                   </li>
                 )}
               </For>
-              <li class="header__search">
+              <li class={styles.headerSearch}>
                 <a href="#">
                   <Icon name="search" />
                   {t('Search')}
diff --git a/src/styles/FourOuFour.module.scss b/src/styles/FourOuFour.module.scss
index 3ae39ce7..3ec6f09c 100644
--- a/src/styles/FourOuFour.module.scss
+++ b/src/styles/FourOuFour.module.scss
@@ -1,4 +1,4 @@
-header {
+.main-header {
   position: absolute;
 }
 

From 65fae2192d802eb66e1d9d63959270f558a9cdc8 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 29 Sep 2022 13:08:22 +0300
Subject: [PATCH 02/11] Header fixes

---
 astro.config.ts                       |  2 +-
 src/components/Nav/Header.module.scss |  9 +++------
 src/components/Nav/Header.tsx         | 13 ++++++++-----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 410398e1..ed30aa6f 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -16,7 +16,7 @@ const getDevCssClassPrefix = (filename: string): string => {
   return filename
     .slice(filename.indexOf(PATH_PREFIX) + PATH_PREFIX.length)
     .replace('.module.scss', '')
-    .replace(/[/?\\]/, '-')
+    .replace(/[/?\\]/g, '-')
     .replace('?', '-')
 }
 
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 5a822699..9d6dee20 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -27,6 +27,7 @@
 }
 
 .headerInner {
+  align-items: center;
   background: #fff;
   border-bottom: 4px solid #000;
   flex-wrap: nowrap;
@@ -85,10 +86,6 @@
   }
 }
 
-nav {
-  align-items: center;
-}
-
 .usernav {
   display: inline-flex;
   padding-right: 0;
@@ -166,7 +163,7 @@ nav {
   }
 }
 
-.burger-container {
+.burgerContainer {
   box-sizing: content-box;
   display: inline-flex;
   float: right;
@@ -243,7 +240,7 @@ nav {
   }
 }
 
-.article-header {
+.articleHeader {
   @include font-size(1.4rem);
 
   left: 0;
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 23ed385c..b61d2ee0 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -103,9 +103,12 @@ export const Header = (props: Props) => {
             </a>
           </div>
           <div class={clsx(styles.mainNavigation, 'col')}>
-            <div class="article-header">{props.title}</div>
+            <div class={styles.articleHeader}>{props.title}</div>
 
-            <ul class="col main-navigation text-xl inline-flex" classList={{ fixed: fixed() }}>
+            <ul
+              class={clsx(styles.mainNavigation, 'col text-xl inline-flex')}
+              classList={{ fixed: fixed() }}
+            >
               <For each={resources}>
                 {(r) => (
                   <li classList={{ selected: r.route === getPage().route }}>
@@ -123,7 +126,7 @@ export const Header = (props: Props) => {
               </li>
             </ul>
           </div>
-          <div class="usernav">
+          <div class={styles.usernav}>
             <div class="usercontrol col">
               <div class="usercontrol__item">
                 <a href="#auth" onClick={handleBellIconClick}>
@@ -153,8 +156,8 @@ export const Header = (props: Props) => {
               </Show>
             </div>
           </div>
-          <div class="burger-container">
-            <div class="burger" classList={{ fixed: fixed() }} onClick={toggleFixed}>
+          <div class={styles.burgerContainer}>
+            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
               <div />
             </div>
           </div>

From 6688da72c0a50fb8a4be3f4e46d1acbc8ef40a2a Mon Sep 17 00:00:00 2001
From: Igor Lobanov <bniwredyc@gmail.com>
Date: Thu, 29 Sep 2022 12:31:01 +0200
Subject: [PATCH 03/11] header search icon styles fixed

---
 src/components/Nav/Header.module.scss | 26 +++++++++++++-------------
 src/components/Nav/Header.tsx         |  2 +-
 src/components/Nav/Icon.tsx           | 21 ++++++++++++++++-----
 3 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 9d6dee20..ac3be68c 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -63,19 +63,6 @@
     height: 80px;
   }
 
-  img {
-    height: 32px;
-    object-fit: contain;
-    object-position: left;
-    transition: height 0.2s;
-    vertical-align: middle;
-    width: 100px;
-
-    @include media-breakpoint-up(lg) {
-      width: 175px;
-    }
-  }
-
   a {
     border: none;
     color: #000;
@@ -86,6 +73,19 @@
   }
 }
 
+.searchIcon {
+  height: 32px;
+  object-fit: contain;
+  object-position: left;
+  transition: height 0.2s;
+  vertical-align: middle;
+  width: 100px;
+
+  @include media-breakpoint-up(lg) {
+    width: 175px;
+  }
+}
+
 .usernav {
   display: inline-flex;
   padding-right: 0;
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index b61d2ee0..11715948 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -120,7 +120,7 @@ export const Header = (props: Props) => {
               </For>
               <li class={styles.headerSearch}>
                 <a href="#">
-                  <Icon name="search" />
+                  <Icon name="search" iconClassName={styles.searchIcon} />
                   {t('Search')}
                 </a>
               </li>
diff --git a/src/components/Nav/Icon.tsx b/src/components/Nav/Icon.tsx
index 4008080a..823cfcac 100644
--- a/src/components/Nav/Icon.tsx
+++ b/src/components/Nav/Icon.tsx
@@ -1,14 +1,25 @@
+import clsx from 'clsx'
 import { mergeProps, Show } from 'solid-js'
+import type { JSX } from 'solid-js'
 import './Icon.css'
 
-export const Icon = (_props: any) => {
-  const props = mergeProps({ title: '', counter: 0 }, _props)
+type IconProps = {
+  className?: string
+  iconClassName?: string
+  style?: string | JSX.CSSProperties
+  title?: string
+  name?: string
+  counter?: number
+}
+
+export const Icon = (passedProps: IconProps) => {
+  const props = mergeProps({ title: '', counter: 0 }, passedProps)
 
   return (
-    <div class="icon" style={props.style}>
-      <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} />
+    <div class={clsx('icon', props.className)} style={props.style}>
+      <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} />
       <Show when={props.counter}>
-        <div class="notifications-counter">{props.counter.toString()}</div>
+        <div class="notifications-counter">{props.counter}</div>
       </Show>
     </div>
   )

From eeeb8f2271db7f1d5190ba5bc5990602df2e251d Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 29 Sep 2022 22:37:49 +0300
Subject: [PATCH 04/11] In the Icon component changed props.className to
 props.class

---
 src/components/Nav/Icon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Nav/Icon.tsx b/src/components/Nav/Icon.tsx
index 823cfcac..b54ce42f 100644
--- a/src/components/Nav/Icon.tsx
+++ b/src/components/Nav/Icon.tsx
@@ -4,7 +4,7 @@ import type { JSX } from 'solid-js'
 import './Icon.css'
 
 type IconProps = {
-  className?: string
+  class?: string
   iconClassName?: string
   style?: string | JSX.CSSProperties
   title?: string
@@ -16,7 +16,7 @@ export const Icon = (passedProps: IconProps) => {
   const props = mergeProps({ title: '', counter: 0 }, passedProps)
 
   return (
-    <div class={clsx('icon', props.className)} style={props.style}>
+    <div class={clsx('icon', props.class)} style={props.style}>
       <img src={`/icons/${props.name}.svg`} alt={props.title ?? props.name} class={props.iconClassName} />
       <Show when={props.counter}>
         <div class="notifications-counter">{props.counter}</div>

From 322a7dfaa5b7dbde4994cae2f463d95867de0b81 Mon Sep 17 00:00:00 2001
From: Igor Lobanov <bniwredyc@gmail.com>
Date: Thu, 29 Sep 2022 21:57:03 +0200
Subject: [PATCH 05/11] minor fixes

---
 src/components/Nav/Icon.tsx | 2 +-
 src/stores/zine/articles.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Nav/Icon.tsx b/src/components/Nav/Icon.tsx
index b54ce42f..227e2115 100644
--- a/src/components/Nav/Icon.tsx
+++ b/src/components/Nav/Icon.tsx
@@ -1,6 +1,6 @@
-import clsx from 'clsx'
 import { mergeProps, Show } from 'solid-js'
 import type { JSX } from 'solid-js'
+import { clsx } from 'clsx'
 import './Icon.css'
 
 type IconProps = {
diff --git a/src/stores/zine/articles.ts b/src/stores/zine/articles.ts
index 37ec3741..f3310868 100644
--- a/src/stores/zine/articles.ts
+++ b/src/stores/zine/articles.ts
@@ -5,7 +5,7 @@ import { addTopicsByAuthor } from './topics'
 import { byStat } from '../../utils/sortby'
 
 import { getLogger } from '../../utils/logger'
-import { createMemo, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
 import { createLazyMemo } from '@solid-primitives/memo'
 
 const log = getLogger('articles store')

From 998f11215bfce090727ed76ced4ee7781ed92001 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 29 Sep 2022 23:10:00 +0300
Subject: [PATCH 06/11] Fixed header class on scroll

---
 src/components/Nav/Header.module.scss | 8 ++++----
 src/components/Nav/Header.tsx         | 5 +++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index 182b7005..b11daeb9 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -138,10 +138,6 @@
     @include media-breakpoint-down(sm) {
       padding: divide($container-padding-x, 2);
     }
-
-    .header--scrolled-bottom & {
-      opacity: 0;
-    }
   }
 
   &.fixed {
@@ -170,6 +166,10 @@
   }
 }
 
+.headerScrolledBottom .mainNavigation {
+  opacity: 0;
+}
+
 .burgerContainer {
   box-sizing: content-box;
   display: inline-flex;
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index db748267..d7738caf 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -75,6 +75,7 @@ export const Header = (props: Props) => {
       setIsScrollingBottom(window.scrollY > scrollTop)
       setIsScrolled(window.scrollY > 0)
       scrollTop = window.scrollY
+      window.console.log(getIsScrollingBottom() && getIsScrolled())
     }
 
     window.addEventListener('scroll', handleScroll, { passive: true })
@@ -88,8 +89,8 @@ export const Header = (props: Props) => {
       class={styles.mainHeader}
       classList={{
         [styles.headerFixed]: props.isHeaderFixed,
-        ['header--scrolled-top']: !getIsScrollingBottom() && getIsScrolled(),
-        ['header--scrolled-bottom']: getIsScrollingBottom() && getIsScrolled()
+        [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
+        [styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled()
       }}
     >
       <Modal name="auth">

From 6dff8827f7207925ca7037fe370aac26b868f4f6 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Thu, 29 Sep 2022 23:11:13 +0300
Subject: [PATCH 07/11] Removed logging

---
 src/components/Nav/Header.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index d7738caf..9b7a1082 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -75,7 +75,6 @@ export const Header = (props: Props) => {
       setIsScrollingBottom(window.scrollY > scrollTop)
       setIsScrolled(window.scrollY > 0)
       scrollTop = window.scrollY
-      window.console.log(getIsScrollingBottom() && getIsScrolled())
     }
 
     window.addEventListener('scroll', handleScroll, { passive: true })

From fff349d478a0421a69534e80b227793da84f7834 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 4 Oct 2022 00:31:11 +0300
Subject: [PATCH 08/11] Fixed header

---
 public/icons/comments-outline.svg      |   3 +
 public/icons/pencil-outline.svg        |   3 +
 public/icons/share-outline.svg         |   3 +
 src/components/Nav/Header.module.scss  | 152 +++++++++++++++++--------
 src/components/Nav/Header.tsx          |  21 +++-
 src/components/Nav/Private.module.scss | 100 ++++++++++++++++
 src/components/Nav/Private.scss        |  58 ----------
 src/components/Nav/Private.tsx         |  12 +-
 src/styles/FourOuFour.module.scss      |   9 --
 src/styles/app.scss                    |   1 +
 10 files changed, 234 insertions(+), 128 deletions(-)
 create mode 100644 public/icons/comments-outline.svg
 create mode 100644 public/icons/pencil-outline.svg
 create mode 100644 public/icons/share-outline.svg
 create mode 100644 src/components/Nav/Private.module.scss
 delete mode 100644 src/components/Nav/Private.scss

diff --git a/public/icons/comments-outline.svg b/public/icons/comments-outline.svg
new file mode 100644
index 00000000..e79a474f
--- /dev/null
+++ b/public/icons/comments-outline.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.0287 1.11303e-08H11.4833C10.2582 -7.574e-05 9.06438 0.386513 8.07182 1.10475C7.07926 1.82299 6.33897 2.83615 5.95618 4.00001H5.818C4.27493 4.00001 2.79513 4.61294 1.70405 5.70406C0.612932 6.79518 0 8.27506 0 9.81801V10.9089C0.000530297 11.7805 0.196883 12.6408 0.574533 13.4262C0.952183 14.2117 1.50141 14.9023 2.18177 15.447V19.2724C2.1817 19.4752 2.26624 19.6688 2.4151 19.8065C2.56396 19.9442 2.76358 20.0136 2.9657 19.9978C3.16789 19.982 3.35432 19.8824 3.47994 19.7233L5.81802 16.727H8.36342C9.58787 16.7263 10.781 16.3393 11.7726 15.6211C12.7642 14.903 13.5042 13.8902 13.8869 12.727H14.0142L16.3631 15.7233C16.4882 15.8846 16.6752 15.9858 16.8785 16.0024C17.0819 16.019 17.2829 15.9493 17.4324 15.8105C17.5819 15.6717 17.6663 15.4765 17.6649 15.2725V11.4471C18.3453 10.9024 18.8945 10.2118 19.2721 9.42628C19.6498 8.64084 19.8461 7.78056 19.8467 6.909V5.81811C19.8467 4.79685 19.5778 3.79362 19.0672 2.90908C18.5565 2.02464 17.8221 1.29017 16.9376 0.77948C16.0532 0.268887 15.0499 3.49299e-05 14.0286 3.49299e-05L14.0287 1.11303e-08ZM8.3635 15.2724H5.54174C5.30273 15.2571 5.07152 15.3605 4.92357 15.5488L3.63632 17.1705V15.0834C3.63595 14.8455 3.51913 14.6227 3.3236 14.4871C2.74696 14.0852 2.27583 13.5501 1.95045 12.9272C1.625 12.3041 1.45492 11.6118 1.45455 10.9089V9.81799C1.45455 8.66074 1.91432 7.55089 2.73263 6.73248C3.55094 5.91417 4.66085 5.45441 5.81814 5.45441H8.36354C9.52079 5.45441 10.6306 5.91417 11.449 6.73248C12.2674 7.55079 12.7271 8.6607 12.7271 9.81799V10.9089C12.7271 12.0661 12.2674 13.176 11.449 13.9944C10.6307 14.8127 9.52083 15.2725 8.36354 15.2725L8.3635 15.2724ZM18.3923 6.90894C18.3915 7.61211 18.2208 8.30468 17.8948 8.92762C17.5687 9.55056 17.0969 10.0856 16.5196 10.487C16.3254 10.6234 16.2101 10.846 16.2105 11.0833V13.1705L14.9087 11.5341C14.7608 11.3459 14.5296 11.2425 14.2905 11.2578H14.1815V10.8941V9.8178C14.1815 8.79654 13.9126 7.79331 13.402 6.90877C12.8913 6.02433 12.1569 5.28986 11.2724 4.77917C10.388 4.26857 9.38464 3.99972 8.36338 3.99972H7.51612C7.86429 3.24011 8.42321 2.5965 9.12646 2.14529C9.82971 1.69401 10.6477 1.45424 11.4834 1.45432H14.0288C15.186 1.45432 16.2959 1.91408 17.1143 2.73239C17.9326 3.5507 18.3923 4.66061 18.3923 5.8179L18.3923 6.90894Z" fill="black"/>
+</svg>
diff --git a/public/icons/pencil-outline.svg b/public/icons/pencil-outline.svg
new file mode 100644
index 00000000..25e1ded8
--- /dev/null
+++ b/public/icons/pencil-outline.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9975 4.89363L13.1038 0L0 13.1064V18H4.89363L17.9975 4.89363ZM13.105 2.55674L15.4421 4.89383L14.4612 5.87591L12.1241 3.53882L13.105 2.55674ZM12.1241 3.53882L14.4612 5.87591L4.14434 16.1915L1.80725 13.8544L12.1241 3.53882ZM1.80725 16.1915V13.8544L4.14434 16.1915H1.80725Z" fill="#141414"/>
+</svg>
diff --git a/public/icons/share-outline.svg b/public/icons/share-outline.svg
new file mode 100644
index 00000000..a12b4c26
--- /dev/null
+++ b/public/icons/share-outline.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9051 5.84476L13.2802 0.219864C13.0659 0.00516444 12.7433 -0.0590774 12.4631 0.057267C12.1827 0.173408 12 0.446907 12 0.750148V2.98109C10.4431 3.00453 6.93799 3.36927 4.10315 5.93941C1.49973 8.29983 0.122008 11.8884 0.00774261 16.6101C0.00376666 16.8204 0 17.0314 0 17.25C0 17.6198 0.269523 17.9345 0.635078 17.9912C0.673581 17.9971 0.712294 18 0.750586 18C1.07243 18 1.36456 17.7924 1.46479 17.4775C1.48885 17.4024 3.87798 10.1908 12 9.76976L11.9997 12.0003C11.9997 12.3035 12.1824 12.577 12.4628 12.6932C12.742 12.8093 13.0655 12.7453 13.28 12.5306L18.9049 6.90566C19.1979 6.61269 19.1979 6.1381 18.9049 5.84512L18.9051 5.84476ZM13.4999 10.1894V9.00001C13.4999 8.58588 13.164 8.25002 12.7499 8.25002C6.93427 8.25002 3.55504 11.3027 1.76204 13.8064C2.23748 10.9045 3.35892 8.6391 5.11105 7.05058C7.66947 4.73114 10.8634 4.47797 12.1347 4.47797C12.3772 4.47797 12.5501 4.48717 12.635 4.49303C12.7083 4.5014 12.7497 4.49994 12.7499 4.49994C13.1529 4.48487 13.4999 4.15319 13.4999 3.74995V2.56053L17.314 6.3749L13.4999 10.1894Z" fill="black"/>
+</svg>
diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index b11daeb9..c3251ecf 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -20,11 +20,9 @@
   }
 }
 
-.headerFixed {
-  position: fixed;
-  top: 0;
-
-  .main-logo {
+.headerFixed.headerScrolledBottom,
+.headerFixed.headerScrolledTop {
+  .mainLogo {
     height: 56px;
 
     img {
@@ -33,6 +31,11 @@
   }
 }
 
+.headerFixed {
+  position: fixed;
+  top: 0;
+}
+
 .headerInner {
   align-items: center;
   background: #fff;
@@ -96,6 +99,7 @@
 .usernav {
   display: inline-flex;
   padding-right: 0;
+  position: relative;
   width: auto;
 
   @include media-breakpoint-down(md) {
@@ -105,48 +109,47 @@
   }
 }
 
-.mainNavigation {
+.mainNavigationWrapper {
+  padding-left: 0;
   position: relative;
   @include font-size(1.7rem);
+}
 
-  ul {
-    display: inline-flex;
-    list-style: none;
-    margin: 0;
-    opacity: 1;
-    padding: 0;
-    transition: opacity 0.3s;
+.mainNavigation {
+  display: inline-flex;
+  list-style: none;
+  margin: 0;
+  opacity: 1;
+  padding: 0;
+  transition: opacity 0.3s;
 
-    @include media-breakpoint-down(md) {
-      background: #fff;
-      bottom: 0;
-      display: none;
-      font-size: 2.6rem;
-      font-weight: bold;
-      left: 0;
-      padding: $container-padding-x;
-      position: fixed;
-      top: 74px;
-      width: 100%;
-      z-index: 1;
+  @include media-breakpoint-down(md) {
+    background: #fff;
+    bottom: 0;
+    display: none;
+    font-size: 2.6rem;
+    font-weight: bold;
+    left: 0;
+    padding: $container-padding-x;
+    position: fixed;
+    top: 74px;
+    width: 100%;
+    z-index: 1;
 
-      li {
-        margin-bottom: 2.4rem;
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      padding: divide($container-padding-x, 2);
+    li {
+      margin-bottom: 2.4rem;
     }
   }
 
-  &.fixed {
-    ul {
-      display: inline-flex;
+  @include media-breakpoint-down(sm) {
+    padding: divide($container-padding-x, 2);
+  }
 
-      @include media-breakpoint-down(lg) {
-        display: block !important;
-      }
+  &.fixed {
+    display: inline-flex;
+
+    @include media-breakpoint-down(lg) {
+      display: block !important;
     }
   }
 
@@ -166,8 +169,11 @@
   }
 }
 
-.headerScrolledBottom .mainNavigation {
-  opacity: 0;
+.headerScrolledBottom {
+  .mainNavigation,
+  .userControl {
+    opacity: 0;
+  }
 }
 
 .burgerContainer {
@@ -247,25 +253,29 @@
   }
 }
 
+.articleHeader,
+.articleControls {
+  opacity: 0;
+  transition: opacity 0.3s, z-index 0s 0.3s;
+  z-index: -1;
+
+  .headerScrolledBottom & {
+    transition: opacity 0.3s;
+    opacity: 1;
+    z-index: 1;
+  }
+}
+
 .articleHeader {
   @include font-size(1.4rem);
 
   left: 0;
   margin: 0.2em;
-  opacity: 0;
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
-  transition: opacity 0.3s, z-index 0s 0.3s;
   white-space: nowrap;
   width: 100%;
-  z-index: -1;
-
-  .header--scrolled-bottom & {
-    transition: opacity 0.3s;
-    opacity: 1;
-    z-index: 1;
-  }
 }
 
 .headerSearch {
@@ -280,3 +290,47 @@
     width: 1em;
   }
 }
+
+.userControl {
+  opacity: 1;
+  transition: opacity 0.3s;
+  z-index: 1;
+
+  .headerScrolledBottom & {
+    transition: opacity 0.3s, z-index 0s 0.3s;
+    opacity: 0;
+    z-index: -1;
+  }
+}
+
+.articleControls {
+  display: flex;
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+
+  .icon {
+    margin-left: 1.6rem;
+    opacity: 0.6;
+    transition: opacity 0.3s;
+  }
+
+  img {
+    vertical-align: middle;
+  }
+
+  a {
+    border: none;
+
+    &:hover {
+      background: none;
+
+      .icon {
+        filter: none;
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index 9b7a1082..c5d33c15 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -10,6 +10,7 @@ import { useStore } from '@nanostores/solid'
 import { session as ssession } from '../../stores/auth'
 import { handleClientRouteLinkClick, router, Routes, useRouter } from '../../stores/router'
 import styles from './Header.module.scss'
+import privateStyles from './Private.module.scss'
 import { getPagePath } from '@nanostores/router'
 import { getLogger } from '../../utils/logger'
 import { clsx } from 'clsx'
@@ -102,7 +103,7 @@ export const Header = (props: Props) => {
               <img src="/logo.svg" alt={t('Discours')} />
             </a>
           </div>
-          <div class={clsx(styles.mainNavigation, 'col')}>
+          <div class={clsx(styles.mainNavigationWrapper, 'col')}>
             <div class={styles.articleHeader}>{props.title}</div>
 
             <ul
@@ -127,8 +128,8 @@ export const Header = (props: Props) => {
             </ul>
           </div>
           <div class={styles.usernav}>
-            <div class="usercontrol col">
-              <div class="usercontrol__item">
+            <div class={clsx(privateStyles.userControl, styles.userControl, 'col')}>
+              <div class={privateStyles.userControlItem}>
                 <a href="#auth" onClick={handleBellIconClick}>
                   <div>
                     <Icon name="bell-white" counter={authorized() ? getWarnings().length : 1} />
@@ -137,7 +138,7 @@ export const Header = (props: Props) => {
               </div>
 
               <Show when={visibleWarnings()}>
-                <div class="usercontrol__item notifications">
+                <div class={clsx(privateStyles.userControlItem, 'notifications')}>
                   <Notifications />
                 </div>
               </Show>
@@ -145,9 +146,9 @@ export const Header = (props: Props) => {
               <Show
                 when={authorized()}
                 fallback={
-                  <div class="usercontrol__item loginbtn">
+                  <div class={clsx(privateStyles.userControlItem, 'loginbtn')}>
                     <a href="#auth" onClick={handleEnterClick}>
-                      {t('enter')}
+                      <Icon name="user-anonymous" />
                     </a>
                   </div>
                 }
@@ -155,6 +156,14 @@ export const Header = (props: Props) => {
                 <Private />
               </Show>
             </div>
+            <div class={styles.articleControls}>
+              <Icon name="share-outline" class={styles.icon} />
+              <a href="#comments">
+                <Icon name="comments-outline" class={styles.icon} />
+              </a>
+              <Icon name="pencil-outline" class={styles.icon} />
+              <Icon name="bookmark" class={styles.icon} />
+            </div>
           </div>
           <div class={styles.burgerContainer}>
             <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
diff --git a/src/components/Nav/Private.module.scss b/src/components/Nav/Private.module.scss
new file mode 100644
index 00000000..817935d1
--- /dev/null
+++ b/src/components/Nav/Private.module.scss
@@ -0,0 +1,100 @@
+.userControl {
+  align-items: baseline;
+  display: flex;
+
+  @include font-size(1.7rem);
+
+  justify-content: flex-end;
+
+  @include media-breakpoint-down(md) {
+    padding: divide($container-padding-x, 2);
+  }
+
+  .circlewrap {
+    margin-right: 0;
+  }
+}
+
+.userControlItem {
+  align-items: center;
+  border: 2px solid #f6f6f6;
+  border-radius: 100%;
+  display: flex;
+  height: 2.4em;
+  justify-content: center;
+  margin-left: divide($container-padding-x, 2);
+  position: relative;
+  width: 2.4em;
+
+  @include media-breakpoint-up(sm) {
+    margin-left: 1.2rem;
+  }
+
+  .circlewrap {
+    height: 23px;
+    min-width: 23px;
+    width: 23px;
+  }
+
+  a {
+    border: none;
+
+    &:hover {
+      background: none;
+
+      &::before {
+        background-color: #000;
+      }
+
+      img {
+        filter: invert(1);
+      }
+    }
+
+    img {
+      filter: invert(0);
+      transition: filter 0.3s;
+    }
+
+    &::before {
+      background-color: #fff;
+      border-radius: 100%;
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition: background-color 0.3s;
+      width: 100%;
+    }
+  }
+
+  img {
+    height: 20px;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  .text-label {
+    display: none;
+  }
+}
+
+.userControlItemWritePost {
+  @include media-breakpoint-up(lg) {
+    .icon {
+      display: none;
+    }
+
+    .text-label {
+      display: inline;
+    }
+  }
+}
+
+.userControlItemInbox,
+.userControlItemSearch {
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+}
diff --git a/src/components/Nav/Private.scss b/src/components/Nav/Private.scss
deleted file mode 100644
index b4f6e954..00000000
--- a/src/components/Nav/Private.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.usercontrol {
-  align-items: baseline;
-  display: flex;
-  @include font-size(1.7rem);
-
-  justify-content: flex-end;
-
-  @include media-breakpoint-down(md) {
-    padding: divide($container-padding-x, 2);
-  }
-
-  .circlewrap {
-    margin-right: 0;
-  }
-}
-
-.usercontrol__item {
-  margin-left: divide($container-padding-x, 2);
-
-  @include media-breakpoint-up(sm) {
-    margin-left: 3.2rem;
-  }
-
-  .circlewrap {
-    height: 23px;
-    min-width: 23px;
-    width: 23px;
-  }
-
-  img {
-    height: 20px;
-    vertical-align: middle;
-    width: auto;
-  }
-
-  .text-label {
-    display: none;
-  }
-}
-
-.usercontrol__item--write-post {
-  @include media-breakpoint-up(lg) {
-    .icon {
-      display: none;
-    }
-
-    .text-label {
-      display: inline;
-    }
-  }
-}
-
-.usercontrol__item--inbox,
-.usercontrol__item--search {
-  @include media-breakpoint-down(sm) {
-    display: none;
-  }
-}
diff --git a/src/components/Nav/Private.tsx b/src/components/Nav/Private.tsx
index 3b4ec787..c9269883 100644
--- a/src/components/Nav/Private.tsx
+++ b/src/components/Nav/Private.tsx
@@ -1,7 +1,7 @@
 import type { Author } from '../../graphql/types.gen'
 import Userpic from '../Author/Userpic'
 import { Icon } from './Icon'
-import './Private.scss'
+import './Private.module.scss'
 import { session as sesstore } from '../../stores/auth'
 import { useStore } from '@nanostores/solid'
 import { useRouter } from '../../stores/router'
@@ -11,19 +11,19 @@ export default () => {
   const { getPage } = useRouter()
 
   return (
-    <div class="usercontrol col">
-      <div class="usercontrol__item usercontrol__item--write-post">
+    <div class="userControl col">
+      <div class="userControlItem userControlItemWritePost">
         <a href="/create">
           <span class="text-label">опубликовать материал</span>
           <Icon name="pencil" />
         </a>
       </div>
-      <div class="usercontrol__item usercontrol__item--search">
+      <div class="userControlItem userControlItemSearch">
         <a href="/search">
           <Icon name="search" />
         </a>
       </div>
-      <div class="usercontrol__item usercontrol__item--inbox">
+      <div class="userControlItem userControlItemInbox">
         <a href="/inbox">
           {/*FIXME: replace with route*/}
           <div classList={{ entered: getPage().path === '/inbox' }}>
@@ -31,7 +31,7 @@ export default () => {
           </div>
         </a>
       </div>
-      <div class="usercontrol__item">
+      <div class="userControlItem">
         <a href={`/${session().user?.slug}`}>
           {/*FIXME: replace with route*/}
           <div classList={{ entered: getPage().path === `/${session().user?.slug}` }}>
diff --git a/src/styles/FourOuFour.module.scss b/src/styles/FourOuFour.module.scss
index 9fca1e57..b8a01d3e 100644
--- a/src/styles/FourOuFour.module.scss
+++ b/src/styles/FourOuFour.module.scss
@@ -1,12 +1,3 @@
-.main-logo {
-  height: 80px !important;
-}
-
-.main-content {
-  padding-bottom: 0;
-  padding-top: 0 !important;
-}
-
 .errorPageWrapper {
   height: 100vh;
   padding-top: 100px;
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 675bdd69..d02308f3 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -537,6 +537,7 @@ figcaption {
 }
 
 .main-content--no-padding {
+  padding-bottom: 0;
   padding-top: 0;
 }
 

From c28a824ebfa1bdacdc63d129b4587659003029ab Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 4 Oct 2022 00:44:21 +0300
Subject: [PATCH 09/11] Fixed header

---
 src/components/Nav/Header.module.scss |  4 ++--
 src/components/Nav/Header.tsx         | 27 +++++++++++++++++----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/components/Nav/Header.module.scss b/src/components/Nav/Header.module.scss
index c3251ecf..c04308a7 100644
--- a/src/components/Nav/Header.module.scss
+++ b/src/components/Nav/Header.module.scss
@@ -169,7 +169,7 @@
   }
 }
 
-.headerScrolledBottom {
+.headerWithTitle.headerScrolledBottom {
   .mainNavigation,
   .userControl {
     opacity: 0;
@@ -296,7 +296,7 @@
   transition: opacity 0.3s;
   z-index: 1;
 
-  .headerScrolledBottom & {
+  .headerWithTitle.headerScrolledBottom & {
     transition: opacity 0.3s, z-index 0s 0.3s;
     opacity: 0;
     z-index: -1;
diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index c5d33c15..2f7ac83a 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -72,6 +72,8 @@ export const Header = (props: Props) => {
   onMount(() => {
     let scrollTop = window.scrollY
 
+    window.console.log(props.title)
+
     const handleScroll = () => {
       setIsScrollingBottom(window.scrollY > scrollTop)
       setIsScrolled(window.scrollY > 0)
@@ -90,7 +92,8 @@ export const Header = (props: Props) => {
       classList={{
         [styles.headerFixed]: props.isHeaderFixed,
         [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
-        [styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled()
+        [styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled(),
+        [styles.headerWithTitle]: props.title
       }}
     >
       <Modal name="auth">
@@ -104,7 +107,9 @@ export const Header = (props: Props) => {
             </a>
           </div>
           <div class={clsx(styles.mainNavigationWrapper, 'col')}>
-            <div class={styles.articleHeader}>{props.title}</div>
+            <Show when={props.title}>
+              <div class={styles.articleHeader}>{props.title}</div>
+            </Show>
 
             <ul
               class={clsx(styles.mainNavigation, 'col text-xl inline-flex')}
@@ -156,14 +161,16 @@ export const Header = (props: Props) => {
                 <Private />
               </Show>
             </div>
-            <div class={styles.articleControls}>
-              <Icon name="share-outline" class={styles.icon} />
-              <a href="#comments">
-                <Icon name="comments-outline" class={styles.icon} />
-              </a>
-              <Icon name="pencil-outline" class={styles.icon} />
-              <Icon name="bookmark" class={styles.icon} />
-            </div>
+            <Show when={props.title}>
+              <div class={styles.articleControls}>
+                <Icon name="share-outline" class={styles.icon} />
+                <a href="#comments">
+                  <Icon name="comments-outline" class={styles.icon} />
+                </a>
+                <Icon name="pencil-outline" class={styles.icon} />
+                <Icon name="bookmark" class={styles.icon} />
+              </div>
+            </Show>
           </div>
           <div class={styles.burgerContainer}>
             <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>

From cd803f1f07164e42291d2cbc7a08af68a94c7772 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 4 Oct 2022 13:41:03 +0300
Subject: [PATCH 10/11] Changed css classes to css-module in the Private
 component

---
 src/components/Nav/Private.module.scss |  4 ++--
 src/components/Nav/Private.tsx         | 15 ++++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/Nav/Private.module.scss b/src/components/Nav/Private.module.scss
index 817935d1..dbe7bb26 100644
--- a/src/components/Nav/Private.module.scss
+++ b/src/components/Nav/Private.module.scss
@@ -75,7 +75,7 @@
     width: auto;
   }
 
-  .text-label {
+  .textLabel {
     display: none;
   }
 }
@@ -86,7 +86,7 @@
       display: none;
     }
 
-    .text-label {
+    .textLabel {
       display: inline;
     }
   }
diff --git a/src/components/Nav/Private.tsx b/src/components/Nav/Private.tsx
index b3441a95..0c0962ce 100644
--- a/src/components/Nav/Private.tsx
+++ b/src/components/Nav/Private.tsx
@@ -1,28 +1,29 @@
 import type { Author } from '../../graphql/types.gen'
 import Userpic from '../Author/Userpic'
 import { Icon } from './Icon'
-import './Private.module.scss'
+import styles from './Private.module.scss'
 import { useAuthStore } from '../../stores/auth'
 import { useRouter } from '../../stores/router'
+import clsx from 'clsx'
 
 export default () => {
   const { session } = useAuthStore()
   const { getPage } = useRouter()
 
   return (
-    <div class="userControl col">
-      <div class="userControlItem userControlItemWritePost">
+    <div class={clsx(styles.userControl, 'col')}>
+      <div class={clsx(styles.userControlItem, styles.userControlItemWritePost)}>
         <a href="/create">
-          <span class="text-label">опубликовать материал</span>
+          <span class={styles.textLabel}>опубликовать материал</span>
           <Icon name="pencil" />
         </a>
       </div>
-      <div class="userControlItem userControlItemSearch">
+      <div class={clsx(styles.userControlItem, styles.userControlItemSearch)}>
         <a href="/search">
           <Icon name="search" />
         </a>
       </div>
-      <div class="userControlItem userControlItemInbox">
+      <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
         <a href="/inbox">
           {/*FIXME: replace with route*/}
           <div classList={{ entered: getPage().path === '/inbox' }}>
@@ -30,7 +31,7 @@ export default () => {
           </div>
         </a>
       </div>
-      <div class="userControlItem">
+      <div class={styles.userControlItem}>
         <a href={`/${session().user?.slug}`}>
           {/*FIXME: replace with route*/}
           <div classList={{ entered: getPage().path === `/${session().user?.slug}` }}>

From 3609dc3a47f4113ac74490365df2fbd404d231d9 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Tue, 4 Oct 2022 13:48:11 +0300
Subject: [PATCH 11/11] Fixed linter error

---
 src/components/Nav/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Nav/Header.tsx b/src/components/Nav/Header.tsx
index bbdceb0b..c8109da7 100644
--- a/src/components/Nav/Header.tsx
+++ b/src/components/Nav/Header.tsx
@@ -92,7 +92,7 @@ export const Header = (props: Props) => {
         [styles.headerFixed]: props.isHeaderFixed,
         [styles.headerScrolledTop]: !getIsScrollingBottom() && getIsScrolled(),
         [styles.headerScrolledBottom]: getIsScrollingBottom() && getIsScrolled(),
-        [styles.headerWithTitle]: props.title
+        [styles.headerWithTitle]: Boolean(props.title)
       }}
     >
       <Modal name="auth">