From a7d8cae4811f2d1689aae0f5a774d88f47c55893 Mon Sep 17 00:00:00 2001
From: Florian Dold <florian.dold@gmail.com>
Date: Sun, 1 Sep 2019 18:14:49 +0200
Subject: fix menu for mobile

---
 common/navigation.j2.inc | 93 ++++++++++++++++++++++++++----------------------
 1 file changed, 50 insertions(+), 43 deletions(-)

(limited to 'common/navigation.j2.inc')

diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index 4d870dcc..f2752339 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -1,45 +1,52 @@
-<nav class="navbar navbar-toggleable navbar-toggleable-md navbar-expand-md navbar-light" style="border-radius: 0px;">
-  <div class="container-fluid">
-    <button class="navbar-toggler navbar-toggler-right"
-            type="button"
-            data-toggle="collapse"
-            data-target="#navbarMain"
-            aria-controls="navbarMain"
-            aria-expanded="false"
-            aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarMain">
-    <ul class="navbar-nav mr-auto">
-      <li class="{{ 'active' if filename == 'index.html' else '' }}"><a class="navbar-brand taler_home" href="https://taler.net/{{ lang }}/index.html">Taler</a></li>
-      <li class="nav-item {{ 'active' if filename == 'features.html' else '' }}"><a class="nav-link" href="https://taler.net/{{ lang }}/features.html">{{ _("Features") }} </a></li>
-      <li class="nav-item {{ 'active' if filename == 'principles.html' else '' }}"><a class="nav-link" href="https://taler.net/{{ lang }}/principles.html">{{ _("Principles") }} </a></li>
-      <li class="nav-item {{ 'active' if filename == 'docs.html' else '' }}"><a class="nav-link" href="https://taler.net/{{ lang }}/docs.html">{{ _("Docs") }} </a></li>
-      <li class="nav-item {{ 'active' if filename == 'team.html' else '' }}"><a class="nav-link" href="team.html">{{ _("Team") }}</a></li>
-    </ul>
-    <ul class="navbar-nav navbar-right">
-      <li class="nav-item dropdown">
-        <button class="btn btn-dark dropdown-toggle"
-                type="button"
-                id="dropdownMenu1"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                aria-expanded="true">
-                <img src="{{ url('images/languageicon.svg') }}"
-                     height="35"
-                     alt="[{{lang}}]" />
-                     {{ lang_full }} [{{ lang }}]
-        </button>
-        <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
-          <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
-          <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
-          <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
-          <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
-          <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
-          <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
-          <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>
-        </ul>
-      </li>
-    </ul>
+{% macro navlink(site, text) -%}
+   <a class="nav-link {{ 'active' if filename == site else '' }}"
+      href="https://taler.net/{{ lang }}/{{ site }}">
+    {{ text }}
+   </a>
+{%- endmacro %}
+
+<nav class="navbar navbar-expand-lg navbar-light">
+  <a class="navbar-brand taler_home" href="https://taler.net/{{ lang }}/index.html">Taler</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('team.html', _('Team')) }}
+    </div>
+
+    <div class="nav-item dropdown">
+      <button class="btn btn-dark dropdown-toggle"
+              type="button"
+              id="dropdownMenu1"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="true">
+              <img src="{{ url('images/languageicon.svg') }}"
+                    height="35"
+                    alt="[{{lang}}]" />
+                    {{ lang_full }} [{{ lang }}]
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
+        <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
+        <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
+        <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
+        <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
+        <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
+        <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
+        <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>
+      </ul>
+    </div>
+
+
   </div>
 </nav>
-- 
cgit v1.2.3