diff options
author | Jimmy Cai <github@jimmycai.com> | 2022-02-27 12:51:02 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-27 12:51:02 +0300 |
commit | 2712887c7c81b7dd0309910859b1d46252f82677 (patch) | |
tree | 3547cce643a9f2cf02195cca87f431c0953e4716 | |
parent | b3b8fa73ef5f82bed55e12221526fbeddc03374f (diff) |
feat: multilingual site switch (#512)
* feat: multilingual site switch
* fix menu item margin
switch to flexbox gap
-rw-r--r-- | assets/scss/partials/menu.scss | 27 | ||||
-rw-r--r-- | assets/scss/partials/sidebar.scss | 17 | ||||
-rw-r--r-- | layouts/partials/sidebar/left.html | 28 |
3 files changed, 55 insertions, 17 deletions
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index 1d612d1..257eedb 100644 --- a/assets/scss/partials/menu.scss +++ b/assets/scss/partials/menu.scss @@ -125,7 +125,6 @@ .menu { padding-left: 0; list-style: none; - display: flex; flex-direction: column; overflow-y: auto; flex-grow: 1; @@ -138,8 +137,17 @@ margin: 0 -15px; + &, + .menu-bottom-section { + gap: 15px; + @include respond(xl) { + margin-top: 30px; + gap: 20px; + } + } + &.show { - display: block; + display: flex; } @include respond(md) { @@ -161,14 +169,6 @@ vertical-align: middle; padding: 10px 30px; - &:not(:last-of-type) { - margin-bottom: 15px; - - @include respond(xl) { - margin-bottom: 20px; - } - } - @include respond(md) { width: 100%; padding: 10px 0; @@ -200,6 +200,13 @@ } } } + + .menu-bottom-section { + margin-top: auto; + display: flex; + flex-direction: column; + width: 100%; + } } .social-menu { diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index c861f6e..4d320a8 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -158,3 +158,20 @@ display: none; } } + +#i18n-switch { + color: var(--body-text-color); + display: inline-flex; + align-content: center; + + select { + border: 0; + background-color: transparent; + color: var(--body-text-color); + + option { + color: var(--card-text-color-main); + background-color: var(--card-background); + } + } +} diff --git a/layouts/partials/sidebar/left.html b/layouts/partials/sidebar/left.html index 4442dfe..35d1c11 100644 --- a/layouts/partials/sidebar/left.html +++ b/layouts/partials/sidebar/left.html @@ -73,12 +73,26 @@ </li> {{ end }} - {{ if (default false .Site.Params.colorScheme.toggle) }} - <li id="dark-mode-toggle"> - {{ partial "helper/icon" "toggle-left" }} - {{ partial "helper/icon" "toggle-right" }} - <span>{{ T "darkMode" }}</span> - </li> - {{ end }} + <div class="menu-bottom-section"> + {{- $currentLanguageCode := .Language.Lang -}} + {{ with .Site.Home.AllTranslations }} + <li id="i18n-switch"> + {{ partial "helper/icon" "language" }} + <select name="language" onchange="window.location.href = this.selectedOptions[0].value"> + {{ range . }} + <option value="{{ .Permalink }}" {{ if eq .Language.Lang $currentLanguageCode }}selected{{ end }}>{{ .Language.LanguageName }}</option> + {{ end }} + </select> + </li> + {{ end }} + + {{ if (default false .Site.Params.colorScheme.toggle) }} + <li id="dark-mode-toggle"> + {{ partial "helper/icon" "toggle-left" }} + {{ partial "helper/icon" "toggle-right" }} + <span>{{ T "darkMode" }}</span> + </li> + {{ end }} + </div> </ol> </aside> |