history is functionnal and with state transition

src/components/nav/FooterTabs.vue

@@ -3,7 +3,16 @@
     <ul>
       <li class="history">
         <div class="wrapper">
-          <span>Historique de consultation</span>
+          <transition name="fade" appear>
+            <span
+              v-if="historyItems.length && !historyOpened"
+              title="Ouvrir l'historique'"
+              @click.prevent="openHistory"
+              @keydown.enter.prevent="openHistory"
+            >
+              Historique de consultation
+            </span>
+          </transition>
         </div>
       </li>
       <li class="results">
@@ -35,13 +44,21 @@ export default {
       get () { return this.$store.state.Search.opened },
       set (value) { this.$store.commit('Search/setOpened', value) }
     },
+    historyOpened: {
+      get () { return this.$store.state.History.opened },
+      set (value) { this.$store.commit('History/setOpened', value) }
+    },
     ...mapState({
-      resultsItems: state => state.Search.results
+      resultsItems: state => state.Search.results,
+      historyItems: state => state.History.items
     })
   },
   methods: {
     openResults () {
       this.resultsOpened = true
+    },
+    openHistory () {
+      this.historyOpened = true
     }
   }
 }

src/components/nav/History.vue

@@ -1,35 +1,57 @@
 <template>
-  <div id="history" class="row">
-    <header class="col-1">
-      <h2>Historique de consultation</h2>
-    </header>
-    <section class="col-10 history-list">
-      <div class="wrapper">
-        <ul>
-          <li>item</li>
-        </ul>
-      </div>
-    </section>
-    <nav class="col-1 tools">
-      <span
-        class="mdi mdi-close"
-        title="close"
-        @click.prevent="close"
-        @keydown.enter.prevent="close"
-      />
-    </nav>
-  </div>
+  <transition name="accordeon" appear>
+    <div
+      v-if="opened"
+      id="history"
+      class="row"
+    >
+      <header class="col-1">
+        <h2>Historique de consultation</h2>
+      </header>
+      <section class="col-10 history-list">
+        <div class="wrapper">
+          <ul v-if="items.length">
+            <li v-for="item in items" :key="item.uuid" class="item">
+              <HistoryItem :item="item" />
+            </li>
+          </ul>
+        </div>
+      </section>
+      <nav class="col-1 tools">
+        <span
+          class="mdi mdi-close"
+          title="close"
+          @click.prevent="close"
+          @keydown.enter.prevent="close"
+        />
+      </nav>
+    </div>
+  </transition>
 </template>
+
 <script>
+
+import HistoryItem from '../Content/HistoryItem'
+import { mapState } from 'vuex'
+
 export default {
   name: 'History',
-  data: () => ({
-
-  }),
+  components: {
+    HistoryItem
+  },
+  computed: {
+    opened: {
+      get () { return this.$store.state.History.opened },
+      set (value) { this.$store.commit('History/setOpened', value) }
+    },
+    ...mapState({
+      items: state => state.History.items
+    })
+  },
   methods: {
     close () {
       console.log('clicked on close history')
-      // this.opened = false
+      this.opened = false
     }
   }
 }

src/components/nav/Results.vue

@@ -7,6 +7,7 @@
     >
       <header class="col-1">
         <h2>Resultats</h2>
+        <span class="search-keys">{{ keys }}</span><br />
         <span class="results-count">{{ results.length }} resultat(s)</span>
       </header>
       <section class="col-10 results-list">