From d4b709dfc5f0cdcaf8244825385dc805d346ec21 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Sat, 30 May 2020 11:27:23 +0200
Subject: [PATCH] fix close lang menu click outside

---
 kit/css/header.css |  4 ++++
 kit/js/menu.js     | 23 +++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/kit/css/header.css b/kit/css/header.css
index cd906ec..25810b1 100644
--- a/kit/css/header.css
+++ b/kit/css/header.css
@@ -204,6 +204,10 @@ header.sticky-header .header-lang-small {
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.63);
 }
 
+header.sticky-header .header-lang-small .dropdown .dropdown-content {
+  top: 54px;  
+}
+
 .header-lang-small .dropdown .dropdown-content li:not(.active) {
   display: block;
   padding: 5px 0;
diff --git a/kit/js/menu.js b/kit/js/menu.js
index 085b431..3d704a9 100644
--- a/kit/js/menu.js
+++ b/kit/js/menu.js
@@ -1,12 +1,19 @@
-document.getElementsByClassName("header-lang-small")[0].addEventListener("click", function(){
+document.addEventListener("click", function(){
+  var langSelector = document.getElementsByClassName("header-lang-small")[0];
   var dropdown = document.getElementById("dropdown");
   var dropdownIcon = document.querySelector('.header-lang-small .icon');
-  console.log(dropdownIcon);
-  if (dropdown.style.display === "block") {
-    dropdown.style.display = "none";
-    dropdownIcon.classList.toggle('active');
+  var isClickInside = langSelector.contains(event.target);
+  if (isClickInside) {
+    if (dropdown.style.display === "block") {
+      dropdown.style.display = "none";
+      dropdownIcon.classList.toggle('active');
+    } else {
+      dropdown.style.display = "block";
+      dropdownIcon.classList.toggle('active');
+    }
   } else {
-    dropdown.style.display = "block";
-    dropdownIcon.classList.toggle('active');
-  }
+    dropdown.style.display = "none";
+    dropdownIcon.classList.remove('active');
+  };
+
 });