further work on language selector on mobile view

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 {
+.header-lang-small .icon {
-  color: red;
+  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;

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(); ?>
 

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'); ?>;
              }
 

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">

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');
+      }
+    };
+
+  };
+});