diff --git a/README.md b/README.md index d07e40a..c45c26f 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 de0ce66..40c3126 100644 --- a/USERS.md +++ b/USERS.md @@ -6,3 +6,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..bab60fa 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -26,6 +26,21 @@ {{ end }} {{ end }} {{ end }} + + {{ if $.Site.Params.showLanguageSelector }} +
+
+ +
+
  • {{ .Language.LanguageName }} ▾
  • +
    + +
    + {{ end }} diff --git a/source/css/header.css b/source/css/header.css index f585b4f..d912bfe 100644 --- a/source/css/header.css +++ b/source/css/header.css @@ -121,6 +121,28 @@ } } + .spacer { + flex-grow: 1; + } + + .language-selector { + position: relative; + + .language-selector-actual { + list-style-type: none; + display: flex; + flex-direction: row; + color: var(--accent); + cursor: pointer; + } + + .language-selector-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..0ea72e2 --- /dev/null +++ b/source/js/languageSelector.js @@ -0,0 +1,12 @@ +const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth"); +const isMobile = () => window.matchMedia(mobileQuery).matches; + +if(!isMobile()) { + languageSelector = document.getElementsByClassName("language-selector-actual")[0]; + moreLanguagesContainer = document.getElementsByClassName("language-selector-more")[0]; + + 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"),