improve main menu interactions

web/src/components/events/eventHeader.module.scss

@@ -13,6 +13,7 @@
 
 .image {
   grid-column: span 2;
+  margin-top: calc(var(--spacing-sitepadding)*-2);
 
   img {
     max-width: 100%;

web/src/components/layout/Header.tsx

@@ -1,5 +1,6 @@
 "use client";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
 import Link from "next/link";
 import styles from "./header.module.scss";
 import { Logo } from "../general/Logo";
@@ -9,25 +10,74 @@ export const Header = () => {
   function toggleMenu() {
     setShowMenu(!showMenu);
   }
+  const siteMenu = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    // only add the event listener when the siteMenu is opened
+    if (!showMenu) return;
+    function handleClick(event: Event) {
+      if (
+        siteMenu.current &&
+        !siteMenu.current.contains(event.target as Node)
+      ) {
+        setShowMenu(false);
+        setActiveMenuItem(undefined);
+      }
+    }
+    window.addEventListener("click", handleClick);
+    // clean up
+    return () => window.removeEventListener("click", handleClick);
+  }, [showMenu]);
+
+  useEffect(() => {
+    if (showMenu) {
+      document.body.style.overflow = "hidden";
+      document.body.style.height = "100vh";
+    } else {
+      document.body.style.overflow = "";
+      document.body.style.height = "";
+    }
+  }, [showMenu]);
+
+  const pathname = usePathname();
+  useEffect(() => {
+    // hide menu on path change
+    setShowMenu(false);
+    setActiveMenuItem(undefined);
+  }, [pathname]);
+
+  const [activeMenuItem, setActiveMenuItem] = useState<string | undefined>(
+    undefined
+  );
 
   return (
     <header className={styles.header}>
       <Link href="/" aria-label="Hjem">
         <Logo />
       </Link>
-      <nav className={styles.siteMenu} data-show={showMenu}>
+      <nav className={styles.siteMenu} data-show={showMenu} ref={siteMenu}>
         <ul className={styles.mainMenu}>
           <li>
-            <Link href="/arrangementer">Arrangementer</Link>
+            <Link
+              href="/arrangementer"
+              data-active={pathname === "/arrangementer"}
+            >
+              Arrangementer
+            </Link>
           </li>
           <li>
-            <Link href="/">Praktisk info</Link>
+            <Link href="/" data-active={pathname === "/praktisk"}>
+              Praktisk info
+            </Link>
           </li>
           <li>
-            <Link href="/utleie">Utleie</Link>
+            <Link href="/utleie" data-active={pathname === "/utleie"}>
+              Utleie
+            </Link>
           </li>
           <li>
-            <Link href="/">Bli medlem</Link>
+            <Link href="/" data-active={pathname === "/medlem"}>
+              Bli medlem
+            </Link>
           </li>
         </ul>
         <button
@@ -39,28 +89,47 @@ export const Header = () => {
         </button>
         <ul className={styles.fullMenu}>
           <li className={styles.menuItemLarge}>
-            <Link href="/arrangementer">Arrangementer</Link>
+            <Link
+              href="/arrangementer"
+              data-active={pathname === "/arrangementer"}
+            >
+              Arrangementer
+            </Link>
           </li>
           <li className={styles.menuItemLarge}>
-            <Link href="/">Praktisk info</Link>
+            <Link href="/" data-active={pathname === "/praktisk"}>
+              Praktisk info
+            </Link>
           </li>
           <li className={styles.menuItemLarge}>
-            <Link href="/utleie">Utleie</Link>
+            <Link href="/utleie" data-active={pathname === "/utleie"}>
+              Utleie
+            </Link>
           </li>
           <li className={styles.menuItemLarge}>
-            <Link href="/">Bli medlem</Link>
+            <Link href="/" data-active={pathname === "/medlem"}>
+              Bli medlem
+            </Link>
           </li>
           <li className={styles.divider}>
-            <Link href="/aktuelt">Siste nytt</Link>
+            <Link href="/aktuelt" data-active={pathname === "/aktuelt"}>
+              Siste nytt
+            </Link>
           </li>
           <li>
-            <Link href="/">Om oss</Link>
+            <Link href="/" data-active={pathname === "/om"}>
+              Om oss
+            </Link>
           </li>
           <li>
-            <Link href="/">Kontakt</Link>
+            <Link href="/" data-active={pathname === "/kontakt"}>
+              Kontakt
+            </Link>
           </li>
           <li>
-            <Link href="/">Bli frivillig</Link>
+            <Link href="/" data-active={pathname === "/frivillig"}>
+              Bli frivillig
+            </Link>
           </li>
           <li className={styles.search}>
             <label>

web/src/components/layout/header.module.scss

@@ -24,17 +24,17 @@
   gap: var(--spacing-sitepadding);
   align-items: flex-start;
 
-  .mainMenu {
-    list-style: none;
-    display: flex;
-    gap: var(--spacing-sitepadding);
-  }
-
   a {
     font-weight: 500;
   }
 }
 
+.mainMenu {
+  list-style: none;
+  display: flex;
+  gap: var(--spacing-sitepadding);
+}
+
 .toggleMenu {
   position: relative;
   z-index: 1001;
@@ -114,7 +114,24 @@
     right: 0;
   }
 
+  .toggleMenu {
+    position: fixed;
+    right: var(--spacing-sitepadding);
+  }
+
   .menuIcon {
     color: var(--color-betongGray);
   }
+}
+
+@media (max-width: 1200px) {
+  .mainMenu {
+    display: none;
+  }
+}
+
+@media (max-width: 800px) {
+  .fullMenu {
+    width: 100%;
+  }
 }