From f514ef14e80930c4ee641c3200eeca66a8d0ac48 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Wed, 29 May 2024 22:51:08 +0700
Subject: [PATCH] storyteller landing hide top nav, show on scroll down by
 100px

---
 .../src/components/layout/TopNav/TopNav.scss  |  4 +++
 .../src/components/layout/TopNav/TopNav.tsx   | 33 +++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
index c9033d7f82..666337a528 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.scss
@@ -8,3 +8,7 @@
   background-color: $bg !important;
   border-bottom: 1px solid transparent !important;
 }
+
+.topbar-hide-top {
+  margin-top: -66px;
+}
diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
index ff934654bf..af13882d48 100644
--- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
+++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx
@@ -208,10 +208,39 @@ export default function TopNav({
     }
   }, [domain.titlePart, isOnLandingPage, isOnBetaKeyRedeemPage]);
 
+  const topBarWrapper = document.getElementById("topbar-wrapper");
+
   if (
-    (domain.titlePart === "Storyteller AI" && isOnLandingPage) ||
-    isOnBetaKeyRedeemPage
+    topBarWrapper &&
+    domain.titlePart === "Storyteller AI" &&
+    isOnLandingPage
   ) {
+    topBarWrapper.classList.add("topbar-hide-top");
+  }
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (
+        topBarWrapper &&
+        domain.titlePart === "Storyteller AI" &&
+        isOnLandingPage
+      ) {
+        if (window.scrollY > 100) {
+          topBarWrapper.classList.remove("topbar-hide-top");
+        } else {
+          topBarWrapper.classList.add("topbar-hide-top");
+        }
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [domain.titlePart, isOnLandingPage, topBarWrapper]);
+
+  if (isOnBetaKeyRedeemPage) {
     return null;
   }