From aeb5c88a54f174b8b010e3e30453311955c03d34 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Sun, 7 Jul 2024 16:04:28 +0200
Subject: [PATCH] add darken overlay when menu is open, remove complicated ref
 stuff

---
 web/src/components/layout/Header.tsx         | 21 +--------
 web/src/components/layout/header.module.scss | 46 +++++++++++++++-----
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 61414e1..787094d 100644
--- a/web/src/components/layout/Header.tsx
+++ b/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>
     </>
diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss
index eae2c75..4eb19a4 100644
--- a/web/src/components/layout/header.module.scss
+++ b/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;