36 lines
2.3 KiB
HTML
36 lines
2.3 KiB
HTML
{{/*
|
|
Desktop language switcher.
|
|
|
|
Links point at the translation of the *current* page when one exists, so
|
|
switching language keeps the visitor where they are. When the current page
|
|
has no translation we fall back to the home page of the target language.
|
|
*/}}
|
|
{{ if hugo.IsMultilingual }}
|
|
{{ $page := . }}
|
|
{{ $headerConfig := .Site.Params.header }}
|
|
{{ $dropdownConfig := $headerConfig.menu.dropdown }}
|
|
<div class="relative group">
|
|
<button type="button" aria-label="{{ i18n "switchLanguage" }}" class="flex items-center {{ with $headerConfig.menu.linkClass }}{{ . }}{{ else }}text-base text-gray-900 hover:text-primary-600 font-bold transition duration-200{{ end }}">
|
|
{{ .Site.Language.LanguageName }}
|
|
<svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="absolute right-0 mt-2 {{ $dropdownConfig.width | default "w-72" }} opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 ease-in-out">
|
|
<div class="{{ $dropdownConfig.container_padding | default "py-6" }} {{ $dropdownConfig.background | default "bg-white" }} {{ $dropdownConfig.border | default "border border-gray-100" }} {{ $dropdownConfig.shadow | default "shadow-xl" }} {{ $dropdownConfig.radius | default "rounded-lg" }}">
|
|
{{ range hugo.Sites }}
|
|
{{ $lang := .Language.Lang }}
|
|
{{ if ne $.Site.Language.Lang $lang }}
|
|
{{ $target := .Home }}
|
|
{{ range $page.AllTranslations }}
|
|
{{ if eq .Lang $lang }}{{ $target = . }}{{ end }}
|
|
{{ end }}
|
|
<a href="{{ $target.RelPermalink }}" hreflang="{{ $lang }}" lang="{{ $lang }}" class="language-switch-link block {{ $dropdownConfig.item_padding | default "px-8 py-3" }} {{ $dropdownConfig.text_size | default "text-sm" }} {{ $dropdownConfig.text_color | default "text-gray-700" }} {{ $dropdownConfig.hover_background | default "hover:bg-gray-50" }}" data-lang="{{ $lang }}">
|
|
{{ .Language.LanguageName }}
|
|
</a>
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }} |