Merge pull request #33 from Rinma/add-language-selector

Added option for language selector

README.md

@@ -78,6 +78,8 @@ paginate = 5
   themeColor = "orange"
   # if you set this to 0, only submenu trigger will be visible
   showMenuItems = 2
+  # show selector to switch language
+  showLanguageSelector = false
   # set theme to full screen width
   fullWidthTheme = false
   # center theme with default width

USERS.md

@@ -17,3 +17,5 @@ TEMPLATE:
 - https://radoslawkoziel.pl **Radek Kozieł** (Software Designer and Developer)
 
 -->
+
+- [rinma.dev](https://rinma.dev) - **Marvin Dalheimer** (Software Developer)

layouts/partials/menu.html

@@ -26,6 +26,20 @@
         {{ end }}
       {{ end }}
     {{ end }}
+
+    {{ if $.Site.Params.showLanguageSelector }}
+    <div class="spacer"></div>
+    <ul class="language-selector">
+      <ul class="language-selector-current">
+          <li>{{ .Language.LanguageName }} ▾</li>
+      </ul>
+      <ul class="language-selector__more hidden">
+        {{ range $.Site.Home.AllTranslations }}
+        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+        {{ end }}
+      </ul>
+    </ul>
+    {{ end }}
   </ul>
 
   <ul class="menu__inner menu__inner--mobile">
@@ -34,5 +48,13 @@
         <li><a href="{{ .URL }}">{{ .Name }}</a></li>
       {{ end }}
     {{ end }}
+    {{ if $.Site.Params.showLanguageSelector }}
+    <hr />
+        {{ range $.Site.Home.AllTranslations }}
+          <li>
+            <a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
+          </li>
+        {{ end }}
+    {{ end }}
   </ul>
 </nav>

source/css/header.css

@@ -121,6 +121,31 @@
       }
     }
 
+    .spacer {
+      flex-grow: 1;
+    }
+
+    .language-selector {
+      position: relative;
+      list-style: none;
+      margin: 0;
+
+      &-current {
+        list-style-type: none;
+        display: flex;
+        flex-direction: row;
+        color: var(--accent);
+        cursor: pointer;
+        margin: 0;
+      }
+
+      &__more {
+        @mixin menu;
+        top: 35px;
+        right: 0;
+      }
+    }
+
     &-trigger {
       color: var(--accent);
       border: 2px solid;

source/js/languageSelector.js

@@ -0,0 +1,18 @@
+const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
+const isMobile = () => window.matchMedia(mobileQuery).matches;
+
+if(!isMobile()) {
+  languageSelector = document.querySelector(".language-selector-current");
+  moreLanguagesContainer = document.querySelector(".language-selector__more");
+
+  document.body.addEventListener("click", () => {
+    if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {
+      moreLanguagesContainer.classList.add("hidden");
+    }
+  });
+
+  languageSelector && languageSelector.addEventListener("click", e => {
+    e.stopPropagation();
+    moreLanguagesContainer.classList.toggle("hidden");
+  });
+}

webpack.config.js

@@ -14,7 +14,11 @@ module.exports = {
     modules: ["source", "node_modules"],
   },
   entry: {
-    "main.js": [join("source", "js", "main.js"), join("source", "js", "menu.js")],
+    "main.js": [
+      join("source", "js", "main.js"),
+      join("source", "js", "menu.js"),
+      join("source", "js", "languageSelector.js")
+    ],
     "prism.js": join("source", "js", "prism.js"),
     "style.css": join("source", "css", "style.css"),
     "red.css": join("source", "css", "color", "red.css"),