1 files changed, 115 insertions, 84 deletions
diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index 1a734c14..a43bdab0 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -1,91 +1,122 @@
 {% macro navlink(site, text) -%}
-   <a class="nav-link {{ 'active' if filename == site else '' }}"
-      href="{{ url_localized(site) }}">
+<li class="nav-item mx-2">
+  <a class="nav-link {{ 'active' if filename == site else '' }}"
+    href="{{ url_localized(site) }}">
     {{ text }}
-   </a>
-{%- endmacro %}
-
-<nav class="navbar navbar-expand-lg navbar-light">
-  <a class="navbar-brand" href="{{ url_localized('index.html') }}">
-    <img class="taler_home" alt="Home" src="{{ url_static('images/logo-2021.svg') }}">
   </a>
-  <button class="navbar-toggler"
-          type="button"
-          data-toggle="collapse"
-          data-target="#navbarNavAltMarkup"
-          aria-controls="navbarNavAltMarkup"
-          aria-expanded="false"
-          aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-    <div class="navbar-nav mr-auto">
-      {{ navlink('features.html', _('Features')) }}
-      {{ navlink('principles.html', _('Principles')) }}
-      {{ navlink('docs.html', _('Docs')) }}
-      {{ navlink('news/index.html', _('News')) }}
-    </div>
+</li>
+{%- endmacro %}
+<div id="skip">
+<a href="#maincontent" class="skip">{% trans %}Skip to main content{% endtrans %}</a>
+</div>
 
-    <div class="nav-item dropdown">
-      <button class="btn btn-dark dropdown-toggle"
+<div class="container">
+  <nav class="navbar navbar-expand-lg border-bottom">
+    <div class="container-fluid">
+      <a class="navbar-brand d-flex" href="{{ url_localized('index.html') }}">
+        <img alt="Home" width="100.5" height="45" src="{{ url_static('images/logo-2021.svg') }}">
+      </a>
+      <button class="navbar-toggler"
               type="button"
-              id="dropdownMenu1"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="true">
-              <img src="{{ url_static('images/languageicon.svg') }}"
-                    height="35"
-                    alt="[{{lang}}]" />
-                    {{ lang_full }} [{{ lang }}]
+              data-bs-toggle="collapse"
+              data-bs-target="#navbarNavAltMarkup"
+              aria-controls="navbarNavAltMarkup"
+              aria-expanded="false"
+              aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
       </button>
-      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
-      {% if lang != 'en' %}
-        <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
-      {% endif %}
-      {% if lang != 'ar' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ar') }}">Arabic [ar]</a></li>
-      {% endif %}
-<!--  {% if lang != 'zh_Hant' %}
-        <li><a class="dropdown-item" href="{{ self_localized('zh_Hant') }}">Chinese [zh]</a></li>
-      {% endif %} -->
-      {% if lang != 'fr' %}
-        <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
-      {% endif %}
-      {% if lang != 'de' %}
-        <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
-      {% endif %}
-<!--  {% if lang != 'hi' %}
-        <li><a class="dropdown-item" href="{{ self_localized('hi') }}">Hindi [hi]</a></li>
-      {% endif %} -->
-      {% if lang != 'it' %}
-        <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
-      {% endif %}
-      {% if lang != 'ja' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ja') }}">Japanese [ja]</a></li>
-      {% endif %}
-      {% if lang != 'ko' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ko') }}">Korean [ko]</a></li>
-      {% endif %}
-<!--  {% if lang != 'pt' %}
-        <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
-      {% endif %} -->
-<!--  {% if lang != 'pt_BR' %}
-        <li><a class="dropdown-item" href="{{ self_localized('pt_BR') }}">Portugu&ecirc;s (Brazil) [pt]</a></li>
-      {% endif %} -->
-      {% if lang != 'ru' %}
-        <li><a class="dropdown-item" href="{{ self_localized('ru') }}">&#x420;&#x443;&#x301;&#x441;&#x441;&#x43A;&#x438;&#x439;&#x20;&#x44F;&#x437;&#x44B;&#x301;&#x43A; [ru]</a></li>
-      {% endif %}
-      {% if lang != 'es' %}
-        <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
-      {% endif %}
-      {% if lang != 'sv' %}
-        <li><a class="dropdown-item" href="{{ self_localized('sv') }}">Svenska [sv]</a></li>
-      {% endif %}
-      {% if lang != 'tr' %}
-        <li><a class="dropdown-item" href="{{ self_localized('tr') }}">T&uuml;rk [tr]</a></li>
-      {% endif %}
-
-      </ul>
+<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+        <ul class="navbar-nav me-lg-auto">
+          {{ navlink('features.html', _('Features')) }}
+          {{ navlink('principles.html', _('Principles')) }}
+          {{ navlink('docs.html', _('Docs')) }}
+          {{ navlink('development.html', _('Development')) }}
+          {{ navlink('ngi-taler.html', _('NGI Taler')) }}
+          {# {{ navlink('comingsoon.html', _('Coming soon')) }} #}
+          {{ navlink('news/index.html', _('News')) }}
+          {# NOTE taler-systems.com deprecated in navigation bar -- Taler Systems is reachable via consortium page instead #}
+          {# <li class="nav-item mx-2">
+            <a class="nav-link" href="https://taler-systems.com/" target="_blank" rel="noopener noreferrer">{% trans %}Company{% endtrans %}</a>
+          </li>
+          #}
+        </ul>
+        <div class="nav-item dropdown">
+          <button class="btn btn-dark dropdown-toggle"
+                  type="button"
+                  id="dropdownMenu1"
+                  data-bs-toggle="dropdown"
+                  data-bs-auto-close="true"
+                  aria-haspopup="true"
+                  aria-expanded="true">
+                  <img src="{{ url_static('images/languageicon.svg') }}"
+                        height="35"
+                        alt="[{{lang}}]" />
+                        {{ lang_full }} [{{ lang }}]
+          </button>
+          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+          {% if lang != 'en' %}
+            <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
+          {% endif %}
+          {% if lang != 'ar' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ar') }}">عربى [ar]</a></li>
+          {% endif %}
+    <!--  {% if lang != 'cs' %}
+            <li><a class="dropdown-item" href="{{ self_localized('cs') }}">Česky [cs]</a></li>
+          {% endif %} -->
+          {% if lang != 'de' %}
+            <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
+          {% endif %}
+          {% if lang != 'es' %}
+            <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
+          {% endif %}
+          {% if lang != 'fi' %}
+            <li><a class="dropdown-item" href="{{ self_localized('fi') }}">Suomen kieli [fi]</a></li>
+          {% endif %}
+          {% if lang != 'fr' %}
+            <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
+          {% endif %}
+          {% if lang != 'hu' %}
+            <li><a class="dropdown-item" href="{{ self_localized('hu') }}">Magyar [hu]</a></li>
+          {% endif %}
+    <!--  {% if lang != 'hi' %}
+            <li><a class="dropdown-item" href="{{ self_localized('hi') }}">हिंदी [hi]</a></li>
+          {% endif %} -->
+          {% if lang != 'it' %}
+            <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
+          {% endif %}
+          {% if lang != 'ja' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ja') }}">日本語 [ja]</a></li>
+          {% endif %}
+          {% if lang != 'ko' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ko') }}">한국어 [ko]</a></li>
+          {% endif %}
+    <!--  {% if lang != 'pt' %}
+            <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
+          {% endif %} -->
+    <!--  {% if lang != 'pt_BR' %}
+            <li><a class="dropdown-item" href="{{ self_localized('pt_BR') }}">Portugu&ecirc;s (Brazil) [pt_BR]</a></li>
+          {% endif %} -->
+          {% if lang != 'ru' %}
+            <li><a class="dropdown-item" href="{{ self_localized('ru') }}">&#x420;&#x443;&#x301;&#x441;&#x441;&#x43A;&#x438;&#x439;&#x20;&#x44F;&#x437;&#x44B;&#x301;&#x43A; [ru]</a></li>
+          {% endif %}
+          {% if lang != 'sv' %}
+            <li><a class="dropdown-item" href="{{ self_localized('sv') }}">Svenska [sv]</a></li>
+          {% endif %}
+          {% if lang != 'tr' %}
+            <li><a class="dropdown-item" href="{{ self_localized('tr') }}">T&uuml;rk&ccedil;e [tr]</a></li>
+          {% endif %}
+          {% if lang != 'uk' %}
+            <li><a class="dropdown-item" href="{{ self_localized('uk') }}">Українська [uk]</a></li>
+          {% endif %}
+          {% if lang != 'zh_Hant' %}
+            <li><a class="dropdown-item" href="{{ self_localized('zh_Hant') }}">繁體中文 [zh]</a></li>
+          {% endif %}
+          {% if lang != 'zh_Hans' %}
+            <li><a class="dropdown-item" href="{{ self_localized('zh_Hans') }}">简体中文 [zh_Hans]</a></li>
+          {% endif %}
+          </ul>
+        </div>
+      </div>
     </div>
-  </div>
-</nav>
+  </nav>
+</div>