lang menu backdrop onclick, first version

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

@@ -35,14 +35,9 @@ 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');
@@ -54,6 +49,38 @@ export class MenuLanguage {
     }
   }
 
+  @Listen('click')
+  handleComponentClick(event) {
+    let target = event.target as HTMLTextAreaElement;
+    const targetElement = target.tagName.toLowerCase();
+    console.log(targetElement);
+  }
+
+  @Listen('click', {target: 'window'})
+  handleClick(event) {
+    if (this.isMenuOpen) {
+      let target = event.target as HTMLTextAreaElement;
+      const targetElement = target.tagName.toLowerCase();
+      console.log(targetElement);
+
+      /*
+      let hyHeader = this.el.closest('.hy-site-header');
+      console.log(hyHeader);
+
+      if (hyHeader) {
+        var hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+      }
+
+      if (hyBackdropDiv) {
+        console.log('backdrop found');
+        (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+        (hyBackdropDiv as HTMLElement).style.top = '0';
+        this.isMenuOpen = !this.isMenuOpen;
+      }
+      */
+    }
+  }
+
   componentWillRender() {
     this.dataMenuLanguageWatcher(this.dataMenuLanguage);
     this.labelsWatcher(this.labels);