reverse header observer fuckery

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

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