Search payments by categories explicitely

It was already possible to search by categories in the full text input,
but it could have matched other fields as well.

Explicitely add a select to search by categories.

Also put the search form in a left aside. The mobile view is not done
for the moment.

1 files changed, 56 insertions, 60 deletions

diff --git a/templates/base.html b/templates/base.html
index a4ebf71..4787ae7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -8,74 +8,70 @@
 <link rel="icon" href="{{ assets | get(key="icon.png") }}">
 
 <header class="g-Header">
-
-  <div class="g-Header__Primary">
-    <div class="g-Header__Title">Budget</div>
-    {% if connected_user %}
-      <form action="/logout" method="POST">
-        {{ connected_user.name }}
-        <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
-      </form>
-    {% endif %}
-  </div>
-
+  <div class="g-Header__Title">Budget</div>
   {% if connected_user %}
-    <div class="g-Header__Secondary">
+    <form action="/logout" method="POST">
+      {{ connected_user.name }}
+      <input class="g-Header__Logout" type="submit" value="(Déconnexion)" />
+    </form>
+  {% endif %}
+</header>
 
-      <a
-        href="/"
-        class="
-          g-Header__Link
-          {% if header == "Payments" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Paiements
-      </a>
+{% if connected_user %}
+  <nav class="g-Nav">
 
-      <a
-        href="/incomes"
-        class="
-          g-Header__Link
-          {% if header == "Incomes" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Revenus
-      </a>
+    <a
+      href="/"
+      class="
+        g-Nav__Link
+        {% if header == "Payments" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Paiements
+    </a>
 
-      <a
-        href="/categories"
-        class="
-          g-Header__Link
-          {% if header == "Categories" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Catégories
-      </a>
+    <a
+      href="/incomes"
+      class="
+        g-Nav__Link
+        {% if header == "Incomes" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Revenus
+    </a>
 
-      <a
-        href="/balance"
-        class="
-          g-Header__Link
-          {% if header == "Balance" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Équilibre
-      </a>
+    <a
+      href="/categories"
+      class="
+        g-Nav__Link
+        {% if header == "Categories" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Catégories
+    </a>
 
-      <a
-        href="/statistics"
-        class="
-          g-Header__Link
-          {% if header == "Statistics" %} g-Header__Link--Current {% endif %}
-        "
-      >
-        Statistiques
-      </a>
+    <a
+      href="/balance"
+      class="
+        g-Nav__Link
+        {% if header == "Balance" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Équilibre
+    </a>
 
-    </div>
-  {% endif %}
+    <a
+      href="/statistics"
+      class="
+        g-Nav__Link
+        {% if header == "Statistics" %} g-Nav__Link--Current {% endif %}
+      "
+    >
+      Statistiques
+    </a>
 
-</header>
+  </nav>
+{% endif %}
 
 <main class="g-Main">
   {% block main %}{% endblock main %}