How to get the current locale in apostrophecms in a nunjucks file using apostrophe-workflow

Question

I'm just starting with apostrophcms and apostrophe-workflow so sorry if that looks obvious.
I'm currently trying to add a language dropdown menu in my header. I get it working in the way that all locales are present in the dropdown but what I try to do is to have the current language shown and others hiden in the dropdown, code may be more explicit:

 <ul class="navbar-nav nav-flex-icons">

          <a class="nav-link dropdown-item" href="#" id="lang-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <pre>{{ apos.i18n | dump}}</pre>
            {# I WANT THE CURRENT LANGUAGE HERE but I don't know where to find it #}
          </a>

          <div class="dropdown-menu" aria-labelledby="lang-dropdown">
            {% for localization in apos
              .workflow
              .localizations() %}
                  {% if localization.name != CURRENT_LOCALE_I_CANT_FIND %}
                    <a class="dropdown-item" href="{{ localization._url | build({ workflowLocale: localization.workflowLocale }) }}">
                      <span class="flag-icon flag-icon-{{localization.workflowLocale.split('-')[1] | lower}}"></span>
                      {{ localization.label }}
                    </a>
                  {% endif %}
            {% endfor %}
          </div>
        </ul>

I hope you can help and thank you in advance.

Answer 1

You can get the active language with apos.workflow.lang() This is mentioned in the README in relation to the HTML lang attribute, but it can be used for setting an active item in the switcher as well.

I used this recently on a project. Similar to yours, the ul is turned into a drop-down selector using CSS and JS and the button toggles it open, but also is displaying the active language. The first loop and conditional is used to get the readable label for the active language, since lang() returns the language/locale code.

{% set lang = '' %}
{% set activeLocale = apos.workflow.lang() %}
{% for l in apos.workflow.localizations() %}
  {% if l.workflowLocale === activeLocale %}
    {% set lang = l.label %}
  {% endif %}
{% endfor %}
<button type="button" data-role="lang-toggle">
  <span>{{ lang }}</span>
</button>
<ul data-role="lang-list">
  {% for locale in apos.workflow.localizations() %}
    {% if locale.workflowLocale !== activeLocale %}
      <li>
        <a href="{{ locale._url | build({ workflowLocale: locale.workflowLocale }) }}" >{{ locale.label }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>