From e0b26b1032ca58d991788345871769421e431ad8 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Thu, 27 Jun 2024 00:15:58 +0200
Subject: [PATCH] sticky menu fuckery

---
 web/src/components/layout/Header.tsx         | 232 ++++++++++++-------
 web/src/components/layout/header.module.scss |  43 +++-
 web/src/css/base.scss                        |   1 -
 3 files changed, 184 insertions(+), 92 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index ba2c49c..501c8ed 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -5,8 +5,13 @@ import Link from "next/link";
 import styles from "./header.module.scss";
 import { Logo, LogoIcon } from "@/components/general/Logo";
 import Icon from "../general/Icon";
+import { useInView } from "react-intersection-observer";
 
 export const Header = () => {
+  const { ref: observer, inView: isScrolled } = useInView({
+    triggerOnce: false,
+  });
+
   const [showMenu, setShowMenu] = useState(false);
   function toggleMenu() {
     setShowMenu(!showMenu);
@@ -51,47 +56,19 @@ export const Header = () => {
   );
 
   return (
-    <header className={styles.header}>
-      <Link href="/" aria-label="Hjem">
-        <Logo />
-      </Link>
-      <nav className={styles.siteMenu} data-show={showMenu} ref={siteMenu}>
-        <ul className={styles.mainMenu}>
-          <li>
-            <Link
-              href="/arrangementer"
-              data-active={pathname === "/arrangementer"}
-            >
-              Arrangementer
-            </Link>
-          </li>
-          <li>
-            <Link href="/praktisk" data-active={pathname === "/praktisk"}>
-              Praktisk info
-            </Link>
-          </li>
-          <li>
-            <Link href="/utleie" data-active={pathname === "/utleie"}>
-              Utleie
-            </Link>
-          </li>
-          <li>
-            <Link href="/medlem" data-active={pathname === "/medlem"}>
-              Bli medlem
-            </Link>
-          </li>
-        </ul>
-        <button
-          className={styles.toggleMenu}
-          aria-label="Vis meny"
-          onClick={toggleMenu}
-        >
-          <MenuIcon showMenu={showMenu} />
-        </button>
-        <div className={styles.fullMenu}>
-          <LogoIcon face="right" />
-          <ul>
-            <li className={styles.menuItemLarge}>
+    <>
+      <header
+        className={styles.header}
+        data-show={showMenu}
+        data-small={isScrolled}
+        ref={siteMenu}
+      >
+        <Link href="/" aria-label="Hjem">
+          <Logo />
+        </Link>
+        <nav className={styles.siteMenu}>
+          <ul className={styles.mainMenu}>
+            <li>
               <Link
                 href="/arrangementer"
                 data-active={pathname === "/arrangementer"}
@@ -99,69 +76,144 @@ export const Header = () => {
                 Arrangementer
               </Link>
             </li>
-            <li className={styles.menuItemLarge}>
+            <li>
               <Link href="/praktisk" data-active={pathname === "/praktisk"}>
                 Praktisk info
               </Link>
             </li>
-            <li className={styles.menuItemLarge}>
+            <li>
               <Link href="/utleie" data-active={pathname === "/utleie"}>
                 Utleie
               </Link>
             </li>
-            <li className={styles.menuItemLarge}>
+            <li>
               <Link href="/medlem" data-active={pathname === "/medlem"}>
                 Bli medlem
               </Link>
             </li>
-            <li className={styles.divider}>
-              <Link href="/aktuelt" data-active={pathname === "/aktuelt"}>
-                Siste nytt
-              </Link>
-            </li>
-            <li>
-              <Link href="/om" data-active={pathname === "/om"}>
-                Om oss
-              </Link>
-            </li>
-            <li>
-              <Link href="/kontakt" data-active={pathname === "/kontakt"}>
-                Kontakt
-              </Link>
-            </li>
-            <li>
-              <Link href="/frivillig" data-active={pathname === "/frivillig"}>
-                Bli frivillig
-              </Link>
-            </li>
-            <li>
-              {/* TODO: skal trolig ikke være så synlig ved lansering */}
-              <Link href="/lokaler">Lokaler*</Link>
-            </li>
-            <li>
-              {/* TODO: skal trolig ikke være så synlig ved lansering */}
-              <Link href="/foreninger">Foreninger*</Link>
-            </li>
-            <li className={styles.search}>
-              <label>
-                <p>Søk</p>
-                <input type="text" />
-              </label>
-            </li>
-            <li className={styles.galtinn}>
-              <a
-                href="https://galtinn.neuf.no/"
-                target="_blank"
-                className="button tertiary"
-              >
-                <span>Mitt medlemskap</span>
-                <Icon type="externalLink" />
-              </a>
-            </li>
           </ul>
+          <button
+            className={styles.toggleMenu}
+            aria-label="Vis meny"
+            onClick={toggleMenu}
+          >
+            <MenuIcon showMenu={showMenu} />
+          </button>
+          <div className={styles.fullMenu}>
+            <LogoIcon face="right" />
+            <ul>
+              <li className={styles.menuItemLarge}>
+                <Link
+                  href="/arrangementer"
+                  data-active={pathname === "/arrangementer"}
+                >
+                  Arrangementer
+                </Link>
+              </li>
+              <li className={styles.menuItemLarge}>
+                <Link href="/praktisk" data-active={pathname === "/praktisk"}>
+                  Praktisk info
+                </Link>
+              </li>
+              <li className={styles.menuItemLarge}>
+                <Link href="/utleie" data-active={pathname === "/utleie"}>
+                  Utleie
+                </Link>
+              </li>
+              <li className={styles.menuItemLarge}>
+                <Link href="/medlem" data-active={pathname === "/medlem"}>
+                  Bli medlem
+                </Link>
+              </li>
+              <li className={styles.divider}>
+                <Link href="/aktuelt" data-active={pathname === "/aktuelt"}>
+                  Siste nytt
+                </Link>
+              </li>
+              <li>
+                <Link href="/om" data-active={pathname === "/om"}>
+                  Om oss
+                </Link>
+              </li>
+              <li>
+                <Link href="/kontakt" data-active={pathname === "/kontakt"}>
+                  Kontakt
+                </Link>
+              </li>
+              <li>
+                <Link href="/frivillig" data-active={pathname === "/frivillig"}>
+                  Bli frivillig
+                </Link>
+              </li>
+              <li>
+                {/* TODO: skal trolig ikke være så synlig ved lansering */}
+                <Link href="/lokaler">Lokaler*</Link>
+              </li>
+              <li>
+                {/* TODO: skal trolig ikke være så synlig ved lansering */}
+                <Link href="/foreninger">Foreninger*</Link>
+              </li>
+              <li className={styles.search}>
+                <label>
+                  <p>Søk</p>
+                  <input type="text" />
+                </label>
+              </li>
+              <li className={styles.galtinn}>
+                <a
+                  href="https://galtinn.neuf.no/"
+                  target="_blank"
+                  className="button tertiary"
+                >
+                  <span>Mitt medlemskap</span>
+                  <Icon type="externalLink" />
+                </a>
+              </li>
+            </ul>
+          </div>
+        </nav>
+        <div className={styles.headerBar} aria-hidden>
+          <Link href="/" aria-label="Hjem">
+            {isScrolled ? <LogoIcon face="right" /> : <Logo />}
+          </Link>
+          <nav className={styles.siteMenu} ref={siteMenu}>
+            <ul className={styles.mainMenu}>
+              <li>
+                <Link
+                  href="/arrangementer"
+                  data-active={pathname === "/arrangementer"}
+                >
+                  Arrangementer
+                </Link>
+              </li>
+              <li>
+                <Link href="/praktisk" data-active={pathname === "/praktisk"}>
+                  Praktisk info
+                </Link>
+              </li>
+              <li>
+                <Link href="/utleie" data-active={pathname === "/utleie"}>
+                  Utleie
+                </Link>
+              </li>
+              <li>
+                <Link href="/medlem" data-active={pathname === "/medlem"}>
+                  Bli medlem
+                </Link>
+              </li>
+            </ul>
+            <button
+              className={styles.toggleMenu}
+              aria-label="Vis meny"
+              onClick={toggleMenu}
+            >
+              <MenuIcon showMenu={showMenu} />
+            </button>
+          </nav>
         </div>
-      </nav>
-    </header>
+      </header>
+      <div className={styles.observer} ref={observer}></div>
+    </>
   );
 };
 
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index dfd9015..f802fbe 100644
--- a/web/src/components/layout/header.module.scss
+++ b/web/src/components/layout/header.module.scss
@@ -11,6 +11,40 @@
   a {
     text-decoration: none;
   }
+
+  &[data-small=true] {
+    .headerBar {
+      animation: slideDown .6s ease forwards;
+    }
+  }
+}
+
+.headerBar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 999;
+  background: var(--color-chateauBlue);
+  color: var(--color-white);
+  padding: .5rem var(--spacing-sitepadding-inline);
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  transform: translateY(-100%);
+  animation: slideUp .4s ease forwards;
+}
+
+@keyframes slideDown {
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  to {
+    transform: translateY(-100%);
+  }
 }
 
 .logo {
@@ -103,7 +137,7 @@
   margin-top: var(--spacing-m);
 }
 
-.siteMenu[data-show=true] {
+.header[data-show=true] {
   .mainMenu {
     animation: slideOutRight .3s ease-out forwards;
   }
@@ -156,4 +190,11 @@
     transform: translateX(0);
     opacity: 1;
   }
+}
+
+// observer to trigger small menu
+.observer {
+  position: absolute;
+  top: calc(100vh + 8rem);
+  height: calc(100% - 100vh - 8rem);
 }
\ No newline at end of file
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index b8e7f94..02e80be 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -7,7 +7,6 @@
 html {
   min-height: 100%;
   font-size: calc(1rem + 8 * (100vw - 320px) / 1920);
-  background-color: var(--color-chateauBlue);
 }
 
 html,