Close language menu on click outside dropdown

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

@@ -42,6 +42,10 @@
     outline-offset: 2px;
   }
 
+  &:hover {
+    cursor: pointer;
+  }
+
   &.is-open {
     .menu--language__toggle__caret {
       transform: rotate(180deg);

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

@@ -51,34 +51,27 @@ export class MenuLanguage {
 
   @Listen('click')
   handleComponentClick(event) {
-    let target = event.target as HTMLTextAreaElement;
-    const targetElement = target.tagName.toLowerCase();
-    console.log(targetElement);
+    event.stopPropagation();
   }
 
   @Listen('click', {target: 'window'})
   handleClick(event) {
     if (this.isMenuOpen) {
-      let target = event.target as HTMLTextAreaElement;
+      const 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 (targetElement !== 'hy-menu-language') {
+        const hyHeader = this.el.closest('.hy-site-header');
+        const hyBackdropDiv = (hyHeader as HTMLElement).children[0];
 
-      if (hyHeader) {
-        var hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+        if (hyBackdropDiv && hyBackdropDiv.classList.contains('is-active')) {
+          (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+          (hyBackdropDiv as HTMLElement).style.top = '0';
+          this.isMenuOpen = !this.isMenuOpen;
+        }
       }
-
-      if (hyBackdropDiv) {
-        console.log('backdrop found');
-        (hyBackdropDiv as HTMLElement).classList.remove('is-active');
-        (hyBackdropDiv as HTMLElement).style.top = '0';
-        this.isMenuOpen = !this.isMenuOpen;
-      }
-      */
     }
+    event.stopPropagation();
   }
 
   componentWillRender() {