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 }} +
+ + {{ 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"),