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>
     </>

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

@@ -34,6 +34,17 @@
       color: var(--color-betongGray);
     }
 
+    .overlay {
+      position: fixed;
+      left: 0;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 999;
+
+      animation: fadeOverlay .6s ease forwards;
+    }
+
     &[data-small=true] {
       .fullMenu {
         .logoIcon {
@@ -54,6 +65,11 @@
   }
 }
 
+.overlay {
+  position: fixed;
+  background: rgba(0, 0, 0, 0);
+}
+
 .headerBar {
   position: fixed;
   top: 0;
@@ -70,18 +86,6 @@
   animation: slideUp .4s ease forwards;
 }
 
-@keyframes slideDown {
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideUp {
-  to {
-    transform: translateY(-100%);
-  }
-}
-
 .logo {
   font-size: 3rem;
   text-transform: uppercase;
@@ -184,6 +188,18 @@
   }
 }
 
+@keyframes slideDown {
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  to {
+    transform: translateY(-100%);
+  }
+}
+
 @keyframes slideOutRight {
   0% {
     transform: translateX(0);
@@ -208,6 +224,12 @@
   }
 }
 
+@keyframes fadeOverlay {
+  to {
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+
 // observer to trigger small menu
 .observer {
   position: absolute;