sticky menu fuckery

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,11 +56,17 @@ export const Header = () => {
   );
 
   return (
-    <header className={styles.header}>
+    <>
+      <header
+        className={styles.header}
+        data-show={showMenu}
+        data-small={isScrolled}
+        ref={siteMenu}
+      >
         <Link href="/" aria-label="Hjem">
           <Logo />
         </Link>
-      <nav className={styles.siteMenu} data-show={showMenu} ref={siteMenu}>
+        <nav className={styles.siteMenu}>
           <ul className={styles.mainMenu}>
             <li>
               <Link
@@ -161,7 +172,48 @@ export const Header = () => {
             </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>
       </header>
+      <div className={styles.observer} ref={observer}></div>
+    </>
   );
 };
 

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;
   }
@@ -157,3 +191,10 @@
     opacity: 1;
   }
 }
+
+// observer to trigger small menu
+.observer {
+  position: absolute;
+  top: calc(100vh + 8rem);
+  height: calc(100% - 100vh - 8rem);
+}

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,