From ace2f79fd531f1853bbe450c6316bdc9a14f0be8 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Wed, 29 Apr 2020 15:48:29 +0200
Subject: [PATCH] further work on language selector on mobile view

---
 kit/css/header.css | 44 +++++++++++++++++++++++++++++++++++++++++---
 kit/footer.php     |  1 +
 kit/functions.php  | 11 ++++++++++-
 kit/header.php     | 11 ++++++++++-
 kit/js/menu.js     | 19 +++++++++++++++++++
 5 files changed, 81 insertions(+), 5 deletions(-)
 create mode 100644 kit/js/menu.js

diff --git a/kit/css/header.css b/kit/css/header.css
index 81de2ba..8a2b837 100644
--- a/kit/css/header.css
+++ b/kit/css/header.css
@@ -146,10 +146,22 @@ header:not(.sticky-header) .header-button-container {
   order: 2;
   margin-left: 2rem;
   display: none;
+  color: #333333;
 }
 
-.header-lang-small span:hover {
-  color: red;
+.header-lang-small .icon {
+  margin-top: 0.05rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: contain;
+  mask: url('../img/ios-arrow-down.svg') no-repeat center / contain;
+  background-color: #333333;
+}
+
+.header-lang-small .icon.active {
+  mask: url('../img/ios-arrow-up.svg');
 }
 
 .header-lang-small li:not(.active) {
@@ -162,11 +174,37 @@ header:not(.sticky-header) .header-button-container {
   text-overflow: hidden;
   max-width: 2.1ch;
   font-weight: 500;
-  color: #333333;
   margin-right: 5px;
   text-transform: uppercase;
 }
 
+.header-lang-small .dropdown {
+  position: relative;
+  display: none;
+}
+
+.header-lang-small .dropdown .dropdown-content {
+  position: absolute;
+  top: 42px;
+  left: -120px;
+  padding: 15px;
+  background-color: white;
+  width: 120px;
+  text-align: right;
+  text-transform: uppercase;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.63);
+}
+
+.header-lang-small .dropdown .dropdown-content li:not(.active) {
+  display: block;
+  padding: 5px 0;
+  font-weight: 500;
+}
+
+.header-lang-small .dropdown .dropdown-content li.active {
+  display: none;
+}
+
 .header-lang {
   position: absolute;
   top: 5px;
diff --git a/kit/footer.php b/kit/footer.php
index a4f635d..02e9a24 100644
--- a/kit/footer.php
+++ b/kit/footer.php
@@ -110,6 +110,7 @@
 <script src="<?php bloginfo('stylesheet_directory');?>/js/swiper.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.js" type="text/javascript"></script>
 <script src="<?php bloginfo('stylesheet_directory');?>/js/main.js" type="text/javascript"></script>
+<script src="<?php bloginfo('stylesheet_directory');?>/js/menu.js" type="text/javascript"></script>
 
 <?php wp_footer(); ?>
 
diff --git a/kit/functions.php b/kit/functions.php
index baefab0..25b7bcf 100644
--- a/kit/functions.php
+++ b/kit/functions.php
@@ -157,7 +157,16 @@ function kit_customize_css()
                color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
              }
 
-             .header-lang-small:hover{
+             /* change color on hover for language selector on mobile view */
+             .header-lang-small:hover li.active span  {
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .header-lang-small:hover .icon  {
+               background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
+             .dropdown-content li:hover span  {
                color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
              }
 
diff --git a/kit/header.php b/kit/header.php
index 2f15a81..ddedeef 100644
--- a/kit/header.php
+++ b/kit/header.php
@@ -107,7 +107,16 @@
            wpm_language_switcher ('list','name');
          };
         ?>
-        <img src="<?php bloginfo('stylesheet_directory');?>/img/ios-arrow-down.svg" width=20px height=20px></img>
+        <div class="icon"></div>
+        <div id="dropdown" class="dropdown">
+          <div class="dropdown-content">
+            <?php
+             if ( function_exists ( 'wpm_language_switcher' ) ) {
+               wpm_language_switcher ('list','name');
+             };
+            ?>
+          </div>
+        </div>
       </div>
 
       <h1 class="header-logo-container">
diff --git a/kit/js/menu.js b/kit/js/menu.js
new file mode 100644
index 0000000..642b5ea
--- /dev/null
+++ b/kit/js/menu.js
@@ -0,0 +1,19 @@
+document.addEventListener("DOMContentLoaded", function() {
+  window.onclick = function(event) {
+
+    // Toggle lang switcher dropdown menu on mobile view
+    if (event.target.closest('.header-lang-small')) {
+      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');
+      } else {
+        dropdown.style.display = "block";
+        dropdownIcon.classList.toggle('active');
+      }
+    };
+
+  };
+});