menu.html

<nav id="sidebar" class="{{if $.Site.Params.showVisitedLinks }}showVisitedLinks{{end}}">

{{- $currentNode := . }}
{{- $showvisitedlinks := .Site.Params.showVisitedLinks -}}

  <div id="header-wrapper">
    <div id="header">
      {{ partial "logo.html" . }}
    </div>
    {{if not .Site.Params.disableSearch}}
        {{ partial "search.html" . }}
    {{end}}
  </div>
  {{if not .Site.Params.disableLandingPageButton }}
    <section id="homelinks">
      <ul>
        <li>
            <a rel="nofollow" class="padding" href='{{ (cond (and (ne .Site.Params.landingPageURL nil) (hugo.IsMultilingual)) .Site.Params.landingPageURL "/") }}'>{{ safeHTML (cond (ne .Site.Params.landingPageName nil) .Site.Params.landingPageName "<i class='fas fa-home'></i> Home") }}</a>
        </li>
      </ul>
    </section>
    {{end}}

    {{ $fn := "js/menu.js" }}
    {{ with .Site.GetPage "/" }}
       {{ $fn = printf "js/menu-%v.js" .GitInfo.AbbreviatedHash }}
    {{ end }}

    {{ if .IsHome }}
      {{ with resources.Get "js/menu-tml.js" }}
       {{ with resources.ExecuteAsTemplate $fn $ . }}
         {{ $a := .RelPermalink }}
       {{ end }}
      {{ end }}
    {{ end }}

    <script src="/{{ $fn }}" type="text/javascript">
    </script>

    <div class="highlightable">
      <ul class="sidemenu sidebar hidden"></ul>
    <hr />
    {{ $disableShortcutsTitle := .Site.Params.DisableShortcutsTitle}}
    {{with .Site.Menus.shortcuts}}
      <section id="shortcuts">
        <h3>{{ if not $disableShortcutsTitle}}{{ T "Shortcuts-Title"}}{{ end }}</h3>
        <ul>
          {{ range sort . "Weight"}}
              <li>
                  {{.Pre}}<a rel="nofollow" class="padding" href="{{.URL | absLangURL }}">{{safeHTML .Name}}</a>{{.Post}}
              </li>
          {{end}}
        </ul>
      </section>
    {{end}}

    {{ if or hugo.IsMultilingual $showvisitedlinks }}
    <section id="prefooter">
      <hr/>
      <ul>
      {{ if and hugo.IsMultilingual (not .Site.Params.DisableLanguageSwitchingButton)}}
        <li>
          <a rel="nofollow" class="padding">
            <i class="fas fa-language fa-fw"></i>
          <div class="select-style">
            <select id="select-language" onchange="location = this.value;">
          {{ $siteLanguages := .Site.Languages}}
          {{ $pageLang := .Page.Lang}}
          {{ range .Page.AllTranslations }}
              {{ $translation := .}}
              {{ range $siteLanguages }}
                  {{ if eq $translation.Lang .Lang }}
                    {{ $selected := false }}
                    {{ if eq $pageLang .Lang}}
                      <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}" selected>{{ .LanguageName }}</option>
                    {{ else }}
                      <option id="{{ $translation.Language }}" value="{{ $translation.Permalink }}">{{ .LanguageName }}</option>
                    {{ end }}
                  {{ end }}
              {{ end }}
          {{ end }}
        </select>
        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
          width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
          <g>
            <g id="arrow-drop-down">
              <polygon points="0,63.75 127.5,191.25 255,63.75           " />
            </g>
          </g>
        </svg>
        </div>
        </a>
        </li>
      {{end}}

      {{ if $showvisitedlinks}}
        <li><a rel="nofollow" class="padding" href="#" data-clear-history-toggle=""><i class="fas fa-history fa-fw"></i> {{T "Clear-History"}}</a></li>
      {{ end }}
      </ul>
    </section>
    {{ end }}
    <section id="footer">
      {{ partial "menu-footer.html" . }}
    </section>
  </div>
</nav>

<script>

  findlink(window.menu, "{{.RelPermalink}}");

  let menu = $(".sidemenu.hidden");
  addToNode(menu, window.menu);

  menu.find("i.fa-angle-right").each(function() {
      $( this ).parent().parent().find("ul").hide();
  });

  // Only show it once the menu is stable - this avoids unintended flickering
  menu.removeClass("hidden");

  // Scroll the highlighted element into view
  $(window).on('load', function(){
      $("li.dd-item.active")[0].scrollIntoView();
  })

  menu.find("li.dd-item.active")[0].scrollIntoView();

</script>