feat: multilingual site switch (#512)

* feat: multilingual site switch

* fix menu item margin

switch to flexbox gap
This commit is contained in:
Jimmy Cai 2022-02-27 10:51:02 +01:00 committed by GitHub
parent b3b8fa73ef
commit 2712887c7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 17 deletions

View File

@ -125,7 +125,6 @@
.menu { .menu {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
flex-grow: 1; flex-grow: 1;
@ -138,8 +137,17 @@
margin: 0 -15px; margin: 0 -15px;
&,
.menu-bottom-section {
gap: 15px;
@include respond(xl) {
margin-top: 30px;
gap: 20px;
}
}
&.show { &.show {
display: block; display: flex;
} }
@include respond(md) { @include respond(md) {
@ -161,14 +169,6 @@
vertical-align: middle; vertical-align: middle;
padding: 10px 30px; padding: 10px 30px;
&:not(:last-of-type) {
margin-bottom: 15px;
@include respond(xl) {
margin-bottom: 20px;
}
}
@include respond(md) { @include respond(md) {
width: 100%; width: 100%;
padding: 10px 0; padding: 10px 0;
@ -200,6 +200,13 @@
} }
} }
} }
.menu-bottom-section {
margin-top: auto;
display: flex;
flex-direction: column;
width: 100%;
}
} }
.social-menu { .social-menu {

View File

@ -158,3 +158,20 @@
display: none; 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);
}
}
}

View File

@ -73,6 +73,19 @@
</li> </li>
{{ end }} {{ 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) }} {{ if (default false .Site.Params.colorScheme.toggle) }}
<li id="dark-mode-toggle"> <li id="dark-mode-toggle">
{{ partial "helper/icon" "toggle-left" }} {{ partial "helper/icon" "toggle-left" }}
@ -80,5 +93,6 @@
<span>{{ T "darkMode" }}</span> <span>{{ T "darkMode" }}</span>
</li> </li>
{{ end }} {{ end }}
</div>
</ol> </ol>
</aside> </aside>