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 {
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 {

View file

@ -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);
}
}
}

View file

@ -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>