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] 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}>