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

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;