menu lang backdrop

src/components/navigation/menu-language/menu-language.scss

@@ -122,3 +122,19 @@
     width: 16px;
   }
 }
+
+.hy-menu-backdrop {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+
+  &.is-active {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition: background-color 300ms;
+    visibility: visible;
+    z-index: 99;
+  }
+}

src/components/navigation/menu-language/menu-language.tsx

@@ -34,6 +34,24 @@ export class MenuLanguage {
 
   @Listen('languageMenuToggle') languageMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
+
+    //console.log(document.querySelectorAll('.hy-site-header')[0]);
+    //let hyBackdropDiv = document.querySelectorAll('.hy-backdrop')[0];
+
+    let hyHeader = this.el.closest('.hy-site-header');
+    console.log((hyHeader as HTMLElement).children[0]);
+    let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+
+    console.log(hyBackdropDiv);
+    if (hyBackdropDiv) {
+      if (this.isMenuOpen) {
+        (hyBackdropDiv as HTMLElement).classList.add('is-active');
+        (hyBackdropDiv as HTMLElement).style.top = '90px';
+      } else {
+        (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+        (hyBackdropDiv as HTMLElement).style.top = '0';
+      }
+    }
   }
 
   componentWillRender() {

src/components/site-header/site-header.tsx

@@ -113,6 +113,7 @@ export class SiteHeader {
       case MenuType.desktop:
         return (
           <header class={classAttributes.join(' ')}>
+            <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
             <div class={'hy-site-header__logo-container'}>
               <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
             </div>