Use a dropdown for language selector

This commit is contained in:
BBaoVanC 2021-11-07 19:55:17 -06:00
parent f16f2b6d8a
commit 21ecc630df
Signed by: bbaovanc
GPG Key ID: 18089E4E3CCF1D3A
2 changed files with 38 additions and 8 deletions

View File

@ -128,7 +128,7 @@ footer {
align-items: flex-start;
}
.navbar, .langpicker {
.navbar {
display: flex;
}
@ -137,12 +137,12 @@ footer {
overflow: auto;
}
.navbar a, .langpicker a {
.navbar a {
padding: 8px 12px;
border-radius: 12px;
}
.navbar-item:hover, .langpicker-item:hover {
.navbar-item:hover, .langpicker summary:hover, .langpicker[open] summary {
background-color: #444;
text-decoration: none;
}
@ -151,6 +151,29 @@ footer {
font-weight: bold;
}
.langpicker {
position: relative;
white-space: nowrap;
}
.langpicker summary {
cursor: pointer;
margin-left: 24px;
padding: 8px 12px;
border-radius: 12px;
}
.langpicker .languages {
position: absolute;
margin-top: 8px;
right: 0;
background-color: #222;
border: 2px solid #333;
padding: 8px 12px;
border-radius: 8px;
list-style: none;
}
/* Basic elements */

View File

@ -21,10 +21,17 @@
</nav>
{{ if .Site.IsMultiLingual }}
<nav class="langpicker">
<details class="langpicker">
<summary>
{{ partial "icon.html" "world" -}}
</summary>
<ul class="languages">
{{ range .Site.Home.AllTranslations }}
<li>
<a class="langpicker-item{{ if eq .Language $.Site.Language }} active{{ end }}" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
</li>
{{ end }}
</nav>
</ul>
</details>
{{ end }}
</div>