Add initial navigation menu for the frontend page

apps/rp/templates/rp/article_list_public.html

@@ -6,8 +6,9 @@
 {% block content-header %}
 <div class="row justify-content-left">
   <div class="col-md-6 offset-md-1">
-    <p>La revue de presse recense les articles de presse relatifs aux sujets de la Quadrature, compilés par ses bénévoles.
-Voir aussi notre revue de presse internationale.</p>
+    <p>La revue de presse recense les articles de presse relatifs aux sujets de
+    la Quadrature. Elle est compilée chaque jour par ses bénévoles, à partir de
+    la presse francophone et internationale.</p>
   </div>
   <div class="col-md-4">
   </div>
@@ -16,27 +17,69 @@ Voir aussi notre revue de presse internationale.</p>
 
 {% block content %}
 <div class="row">
-<div class="col-md-12 white-bg">
+<div class="col-md-12 white-bg shadow-effect">
+
+  <div class="row">
+  <div class="col-md-10 offset-1">
+
+    <ul class="nav nav-compressed my-4">
+      <li class="nav-item">
+        <a class="nav-link active" href="#">
+          <span class="fa-stack fa-md">
+            <i class="fa fa-circle-thin fa-stack-2x"></i>
+            <i class="fa fa-map-marker fa-stack-1x"></i>
+          </span>
+          Presse francophone
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">
+          <span class="fa-stack fa-md">
+            <i class="fa fa-circle-thin fa-stack-2x"></i>
+            <i class="fa fa-globe fa-stack-1x"></i>
+          </span>
+          Presse internationale
+        </a>
+      </li>
+
+      <li class="nav-item ml-auto">
+        <a class="nav-link disabled" href="#">
+          <span class="fa-stack fa-md">
+            <i class="fa fa-circle-thin fa-stack-2x"></i>
+            <i class="fa fa-search fa-stack-1x"></i>
+          </span>
+          Rechercher
+        </a>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">
+          <span class="fa-stack fa-md">
+            <i class="fa fa-circle-thin fa-stack-2x"></i>
+            <i class="fa fa-tags fa-stack-1x"></i>
+          </span>
+          Tags
+        </a>
+      </li>
 
-  <div class="well">
     {% if is_paginated %}
-      <div class="pagination">
-        <span class="page-links">
+      <li class="nav-item pagination">
+        <span class="nav-text page-links">
           {% if page_obj.has_previous %}
-            <a href="?page={{ page_obj.previous_page_number }}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
+            <a href="?page={{ page_obj.previous_page_number }}" class="mr-2"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
           {% endif %}
           <span class="page-current">
             Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
           </span>
           {% if page_obj.has_next %}
-            <a href="?page={{ page_obj.next_page_number }}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
+            <a href="?page={{ page_obj.next_page_number }}" class="ml-2"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
           {% endif %}
         </span>
-      </div>
+      </li>
     {% endif %}
 
-    <div class="row">
-    <div class="col-md-10 offset-1">
+    </ul>
+
 
     {% for article in object_list %}
     <section class="article-card d-flex">

static/src/components/navigation.css

@@ -77,3 +77,17 @@ ul.nav.nav-integrated li {
 	padding: .4rem .8rem;
 	margin-left: .5rem;
 }
+
+.nav.nav-compressed li .nav-link {
+	padding-left: 0;
+}
+
+.nav .nav-text {
+	padding: 0.5em 1em;
+	display: flex;
+  align-items: center;
+}
+
+.nav.nav-compressed .active {
+	font-weight: bold;
+}

static/src/shared/utils.css

@@ -2,3 +2,15 @@
   display: inline-block;
   height: 1em;
 }
+
+.stacked-effect {
+  box-shadow: 0 -1px 1px rgba(0,0,0,0.15),
+              0 -20px 0 -10px #eee,
+              0 -20px 1px -9px rgba(0,0,0,0.15),
+              0 -40px 0 -20px #eee,
+              0 -40px 1px -19px rgba(0,0,0,0.15);
+}
+
+.shadow-effect {
+  box-shadow: 0 -1px 10px rgba(0, 0, 0, .15);
+}