improve main menu interactions

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>