Multilingual sites supports

sass/menu.scss

@@ -0,0 +1,46 @@
+@import "variables";
+
+.menu--language-selector {
+  &.menu {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  &.open {
+    .menu__dropdown {
+      display: flex;
+    }
+  }
+  .menu {
+    &__trigger {
+      color: var(--accent);
+      border: 2px solid;
+      margin-left: 10px;
+      height: 100%;
+      padding: 3px 8px;
+      margin-bottom: 0 !important;
+      position: relative;
+      cursor: pointer;
+    }
+    &__dropdown {
+      left: auto;
+      right: 0;
+      display: none;
+      flex-direction: column;
+      position: absolute;
+      background: var(--background);
+      box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background);
+      color: var(--accent);
+      border: 2px solid var(--accent);
+      margin: 0;
+      padding: 10px;
+      top: 10px;
+      left: 0;
+      list-style: none;
+      z-index: 99;
+    }
+  }
+}

sass/style.scss

@@ -3,6 +3,7 @@
 @import 'header';
 @import 'logo';
 @import 'main';
+@import 'menu';
 @import 'post';
 @import 'pagination';
 @import 'footer';

static/js/menu.js

@@ -0,0 +1,44 @@
+const container = document.querySelector(".container");
+const allMenus = document.querySelectorAll(".menu");
+
+// Hide menus on body click
+document.body.addEventListener("click", () => {
+  allMenus.forEach(menu => {
+    if (menu.classList.contains("open")) {
+      menu.classList.remove("open");
+    }
+  });
+});
+
+// Reset menus on resize
+window.addEventListener("resize", () => {
+  allMenus.forEach(menu => {
+    menu.classList.remove("open");
+  });
+});
+
+// Handle desktop menu
+allMenus.forEach(menu => {
+  const trigger = menu.querySelector(".menu__trigger");
+  const dropdown = menu.querySelector(".menu__dropdown");
+
+  trigger.addEventListener("click", e => {
+    e.stopPropagation();
+
+    if (menu.classList.contains("open")) {
+      menu.classList.remove("open");
+    } else {
+      // Close all menus...
+      allMenus.forEach(m => m.classList.remove("open"));
+      // ...before opening the current one
+      menu.classList.add("open");
+    }
+
+    if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) {
+      dropdown.style.left = "auto";
+      dropdown.style.right = 0;
+    }
+  });
+
+  dropdown.addEventListener("click", e => e.stopPropagation());
+});

templates/index.html

@@ -1,6 +1,7 @@
 {% import "macros/date.html" as date_macros -%}
 {% import "macros/head.html" as head_macros -%}
 {% import "macros/menu.html" as menu_macros -%}
+{% import "macros/language_menu.html" as language_menu_macros -%}
 {% import "macros/post.html" as post_macros -%}
 {% import "macros/title.html" as title_macros -%}
 
@@ -57,6 +58,11 @@
                     </div>
                 </a>
             </div>
+            {%- if page %}
+              {{ language_menu_macros::menu(page=page) }}
+            {%- elif section %}
+              {{ language_menu_macros::menu(page=section) }}
+            {% endif -%}
         </div>
 
         {% block header_menu %}
@@ -129,6 +135,7 @@
     {% endblock footer %}
 
 </div>
+<script type="text/javascript" src="/js/menu.js"></script>
 {%- block extra_body %}
 {% endblock extra_body -%}
 </body>

templates/macros/language_menu.html

@@ -0,0 +1,12 @@
+{% macro menu(page) %}
+<ul class="menu menu--desktop menu--language-selector">
+  <li class="menu__trigger">{{ trans(key="Language", lang=page.lang) }}&nbsp;▾</li>
+  <li>
+    <ul class="menu__dropdown">
+      {%- for item in page.translations %}
+        <li><a href="{{ item.permalink }}">{{ trans(key=item.lang, lang=page.lang) }}</a></li>
+      {% endfor -%}
+    </ul>
+  </li>
+</ul>
+{% endmacro menu %}