hugo-theme-stack/layouts/partials/sidebar/left.html

<aside class="sidebar left-sidebar sticky {{ if .Site.Params.sidebar.compact }}compact{{ end }}">
    <button class="hamburger hamburger--spin" type="button" id="toggle-menu" aria-label="{{ T `toggleMenu` }}">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </button>

    <header>
        {{ with .Site.Params.sidebar.avatar }}
            {{ if (default true .enabled) }}
            <figure class="site-avatar">
                <a href="{{ .Site.BaseURL | relLangURL }}">
                {{ if not .local }}
                    <img src="{{ .src }}" width="300" height="300" class="site-logo" loading="lazy" alt="Avatar">
                {{ else }}
                    {{ $avatar := resources.Get (.src) }}
                    
                    {{ if $avatar }}
                        {{ $avatarResized := $avatar.Resize "300x" }}
                        <img src="{{ $avatarResized.RelPermalink }}" width="{{ $avatarResized.Width }}"
                            height="{{ $avatarResized.Height }}" class="site-logo" loading="lazy" alt="Avatar">
                    {{ else }}
                        {{ errorf "Failed loading avatar from %q" . }}
                    {{ end }}
                {{ end }}
                </a>
                {{ with $.Site.Params.sidebar.emoji }}
                    <span class="emoji">{{ . }}</span>
                {{ end }}
            </figure>
            {{ end }}
        {{ end }}
        
        <div class="site-meta">
            <h1 class="site-name"><a href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title }}</a></h1>
            <h2 class="site-description">{{ .Site.Params.sidebar.subtitle }}</h2>
        </div>
    </header>

    {{- with .Site.Menus.social -}}
        <ol class="social-menu">
            {{ range . }}
                <li>
                    <a 
                        href='{{ .URL }}'
                        {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
                        {{ with .Name }}title="{{ . }}"{{ end }}
                        rel="me"
                    >
                        {{ $icon := default "link" .Params.Icon }}
                        {{ with $icon }}
                            {{ partial "helper/icon" . }}
                        {{ end }}
                    </a>
                </li>
            {{ end }}
        </ol>
    {{- end -}}

    <ol class="menu" id="main-menu">
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
        {{ $active := or (eq $currentPage.Title .Name) (or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .)) }}
        <li {{ if $active }} class='current' {{ end }}>
            <a href='{{ .URL }}' {{ if eq .Params.newTab true }}target="_blank"{{ end }}>
                {{ $icon := default .Pre .Params.Icon }}
                {{ if .Pre }}
                    {{ warnf "Menu item [%s] is using [pre] field to set icon, please use [params.icon] instead.\nMore information: https://docs.stack.jimmycai.com/configuration/custom-menu.html" .URL }}
                {{ end }}
                {{ with $icon }}
                    {{ partial "helper/icon" . }}
                {{ end }}
                <span>{{- .Name -}}</span>
            </a>
        </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="localStorage.userLang = this.selectedOptions[0].dataset.lang; window.location.href = this.selectedOptions[0].value">
                        {{ range . }}
                            <option data-lang="{{ .Language.Lang }}" 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>