From aa914f4e6f98ce583e6a33416573d20723bf2de6 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Sun, 7 Jul 2024 14:02:42 +0200
Subject: [PATCH] reverse header observer fuckery

---
 web/src/components/layout/Header.tsx         | 17 ++++++++++-------
 web/src/components/layout/header.module.scss |  3 +--
 web/src/css/base.scss                        |  7 -------
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 92b9755..17c18af 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -8,7 +8,7 @@ import Icon from "../general/Icon";
 import { useInView } from "react-intersection-observer";
 
 export const Header = () => {
-  const { ref: observer, inView: isScrolled } = useInView({
+  const { ref: observer, inView: isInView } = useInView({
     triggerOnce: false,
   });
 
@@ -36,11 +36,14 @@ export const Header = () => {
 
   useEffect(() => {
     if (showMenu) {
-      document.body.style.overflow = "hidden";
-      document.body.style.height = "100vh";
+      const scrollY = window.scrollY;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
     } else {
-      document.body.style.overflow = "";
-      document.body.style.height = "";
+      const scrollY = parseInt(document.body.style.top || "0") * -1;
+      document.body.style.position = "";
+      document.body.style.top = "";
+      window.scrollTo(0, scrollY);
     }
   }, [showMenu]);
 
@@ -60,7 +63,7 @@ export const Header = () => {
       <header
         className={styles.header}
         data-show={showMenu}
-        data-small={isScrolled}
+        data-small={!isInView}
         ref={siteMenu}
       >
         <Link href="/" aria-label="Hjem">
@@ -176,7 +179,7 @@ export const Header = () => {
         </nav>
         <div className={styles.headerBar} aria-hidden>
           <Link href="/" aria-label="Hjem">
-            {isScrolled ? <LogoIcon face="right" /> : <Logo />}
+            {!isInView ? <LogoIcon face="right" /> : <Logo />}
           </Link>
           <nav className={styles.siteMenu} ref={siteMenu}>
             <ul className={styles.mainMenu}>
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index 629b869..eae2c75 100644
--- a/web/src/components/layout/header.module.scss
+++ b/web/src/components/layout/header.module.scss
@@ -211,6 +211,5 @@
 // observer to trigger small menu
 .observer {
   position: absolute;
-  top: calc(100vh + 8rem);
-  height: 100%;
+  top: 8rem;
 }
\ No newline at end of file
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index 0dffd59..c0a80bc 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -26,13 +26,6 @@ body {
   line-height: 1.5;
 
   position: relative;
-
-  @media (max-width: 1000px) {
-    &.hideScroll {
-      overflow: hidden;
-      height: 100vh;
-    }
-  }
 }
 
 .site-main {