Add dropdown for languages

_includes/language_switcher.html

@@ -1,14 +1,20 @@
-   {% for language in site.translations[site.lang]["global"]["langs"] %}
-      {% assign locale = language[0] %}
-      {% assign name = language[1] %}
-
-      {% capture page_translation_url %}
-         {% if locale == site.default_locale %}
-            {{ site.baseurl_root }}{{ page.url }} }}
-         {% else %}
-            {{ site.baseurl_root }}/{{ locale }}{{ page.url }} }}
-         {% endif %}
-      {% endcapture %}
-
-      <a class="{{ include.item_class_list }}" href={{ page_translation_url }}>{{ name }}</a>
-   {% endfor %}
+
+   <i class="fas fa-globe  mr-12" id="globe" onclick="show()"></i>
+   <div id="dropdown" class="hidden">
+      {% for language in site.translations[site.lang]["global"]["langs"] %}
+         {% assign locale = language[0] %}
+         {% assign name = language[1] %}
+
+         {% capture page_translation_url %}
+            {% if locale == site.default_locale %}
+               {{ site.baseurl_root }}{{ page.url }} }}
+            {% else %}
+               {{ site.baseurl_root }}/{{ locale }}{{ page.url }} }}
+            {% endif %}
+         {% endcapture %}
+
+         <li><a class="text-xs" href={{ page_translation_url }}>{{ name }}</a></li>
+
+      {% endfor %}
+   </div>
+

_includes/navbar.html

@@ -1,19 +1,18 @@
-<div class="flex flex-row justify-between">
-  <div>
+<div class="flex flex-row relative">
+  <div class="mr-64">
     <a href="/">
       <img src='{{ "/assets/img/logo_without_slogan.svg" | prepend:site.baseurl }}' />
     </a>
   </div>
 
-  <nav class="hidden md:flex">
-    <ul class="flex text-gray-300">
+  <nav class="hidden md:flex ml-64">
+    <ul class="flex text-gray-300 absolute">
       <li class="ml-8"><a href={{ "/blog.html" | prepend: site.baseurl }}>{% t menu.blog %}</a></li>
       <li class="ml-8"><a href={{ "https://community.coopdevs.org" }}>{% t menu.community %}</a></li>
       <li class="ml-8"><a href={{ "/jobs" | prepend: site.baseurl }}>{% t menu.jobs %}</a></li>
-    </ul>
-
-    <ul class="flex ml-8 text-gray-300">
-      {% include language_switcher.html item_class_list = "ml-8" %}
+      <ul class="flex-col ml-8 text-gray-300">
+        {% include language_switcher.html %}
+      </ul>
     </ul>
   </nav>
 

_layouts/default.html

@@ -5,6 +5,8 @@
     {% include head.html %}
 
     <link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+
     <link rel="stylesheet" href='{{ "/assets/css/site.css" | prepend:site.baseurl }}'>
     <link rel="stylesheet" href='{{ "/assets/css/post.css" | prepend:site.baseurl }}'>
   </head>

assets/js/index.js

@@ -17,3 +17,10 @@
   hamburger.closeButton.addEventListener('click', function(e) { hamburger.toggle(e); });
 
 }());
+
+function show() { 
+  var element = document.getElementById("dropdown");
+    element.classList.toggle('hidden'); 
+}
+
+