website/layouts/partials/sidebar.html

{{ $currentPage := . }}

<header id="sidebar">
    <div id="avatar-wrapper">
        {{ with .Site.Params.avatar }}
            {{ $avatar := resources.Get . }}
            {{ $avatar := $avatar.Resize "96x webp" }}
            <img id="avatar" alt="{{ $.Site.Params.displayName }}" src="{{ $avatar.RelPermalink }}" />
        {{ end }}
    </div>
    <nav id="sidebar-menu" aria-label="primary-navigation">
        <ul>
            {{- range .Site.Menus.main }}
                {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}
                    <li class="active"><a class="hint-text" href="{{ .URL }}" data-title="{{ i18n .Identifier | default .Name }}" aria-label="{{ i18n .Identifier | default .Name }}">{{ partial "helpers/icons" .Identifier }}</a></li>
                {{ else }}
                    <li><a class="hint-text" href="{{ .URL }}" data-title="{{ i18n .Identifier | default .Name }}" aria-label="{{ i18n .Identifier | default .Name }}">{{ partial "helpers/icons" .Identifier }}</a></li>
                {{ end }}
            {{- end }}
        </ul>
    </nav>
    <div>
        <nav id="social-links" aria-label="social-links">
            <a class="hint-text" rel="me" href="https://social.anoxinon.de/@vri" aria-label="Mastodon">{{ partial "helpers/icons" "mastodon" }}</a>
        </nav>
        <div id="languages">
        {{- if .Site.IsMultiLingual }}
            {{ $siteLanguages := .Site.Languages }}
            {{ $pageLanguage := .Page.Lang }}
    
            {{ range .Page.AllTranslations }}
                {{ $translation := . }}
                {{ range $siteLanguages }}
                    {{ if eq $translation.Lang .Lang }}
                        {{ if ne $pageLanguage .Lang }}
                            <a class="hint-text" id="language" href="{{ $translation.Permalink }}" aria-label="{{ .LanguageName }}">{{ .Params.languageFlag }}</a>
                        {{ end }}
                    {{ end }}
                {{ end }}
            {{ end }}
        {{- end }}
        </div>
    </div>
</header>