add darken overlay when menu is open, remove complicated ref stuff

web/src/components/layout/Header.tsx

@@ -17,23 +17,6 @@ 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) {
@@ -65,7 +48,6 @@ export const Header = () => {
         className={styles.header}
         data-show={showMenu}
         data-small={!isInView}
-        ref={siteMenu}
       >
         <Link href="/" aria-label="Hjem">
           <Logo />
@@ -182,7 +164,7 @@ export const Header = () => {
           <Link href="/" aria-label="Hjem">
             {!isInView ? <LogoIcon face="right" /> : <Logo />}
           </Link>
-          <nav className={styles.siteMenu} ref={siteMenu}>
+          <nav className={styles.siteMenu}>
             <ul className={styles.mainMenu}>
               <li>
                 <Link
@@ -217,6 +199,7 @@ export const Header = () => {
             </button>
           </nav>
         </div>
+        <div className={styles.overlay} onClick={toggleMenu}></div>
       </header>
       <div className={styles.observer} ref={observer}></div>
     </>