diff --git a/README.md b/README.md
index 7c26ffd..2cdb5bd 100644
--- a/README.md
+++ b/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
diff --git a/USERS.md b/USERS.md
index 3b3ff62..3f89877 100644
--- a/USERS.md
+++ b/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)
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index 9fe6e60..9a215b4 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -26,6 +26,20 @@
{{ end }}
{{ end }}
{{ end }}
+
+ {{ if $.Site.Params.showLanguageSelector }}
+
+
+
+ - {{ .Language.LanguageName }} ▾
+
+
+
+ {{ end }}
diff --git a/source/css/header.css b/source/css/header.css
index f585b4f..2f73def 100644
--- a/source/css/header.css
+++ b/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;
diff --git a/source/js/languageSelector.js b/source/js/languageSelector.js
new file mode 100644
index 0000000..104f28e
--- /dev/null
+++ b/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");
+ });
+}
diff --git a/webpack.config.js b/webpack.config.js
index e5ae108..e965665 100644
--- a/webpack.config.js
+++ b/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"),