update header with dropdown for secondary pages & add missing basic routes and pages

src/App.vue

@@ -1,26 +1,42 @@
 <template>
   <div id="app">
     <header>
-      <b-navbar toggleable="md">
+      <b-navbar>
+        <b-dropdown variant="link" no-caret>
+          <template #button-content>
+            <span class="navbar-toggler-icon" />
+            <span class="sr-only">Menu</span>
+          </template>
+
+          <b-dropdown-item :to="{ name: 'home' }">
+            {{ $t('sections.home') }}
+          </b-dropdown-item>
+          <b-dropdown-item :to="{ name: 'introduction' }">
+            {{ $t('sections.introduction') }}
+          </b-dropdown-item>
+          <b-dropdown-item :to="{ name: 'blog' }">
+            {{ $t('sections.blog') }}
+          </b-dropdown-item>
+          <b-dropdown-item :to="{ name: 'contact' }">
+            {{ $t('sections.contact') }}
+          </b-dropdown-item>
+        </b-dropdown>
+
         <b-navbar-brand :to="{ name: 'home' }">
           {{ $t('title') }}
         </b-navbar-brand>
 
-        <b-navbar-toggle target="nav-collapse" />
-
-        <b-collapse id="nav-collapse" is-nav>
-          <b-navbar-nav class="ml-auto">
-            <b-nav-item :to="{ name: 'library' }">
-              {{ $t('sections.library') }}
-            </b-nav-item>
-            <b-nav-item :to="{ name: 'kit' }">
-              {{ $t('sections.kit') }}
-            </b-nav-item>
-            <b-nav-item :to="{ name: 'gallery' }">
-              {{ $t('sections.gallery') }}
-            </b-nav-item>
-          </b-navbar-nav>
-        </b-collapse>
+        <b-nav class="ml-auto">
+          <b-nav-item :to="{ name: 'library' }">
+            {{ $t('sections.library') }}
+          </b-nav-item>
+          <b-nav-item :to="{ name: 'kit' }">
+            {{ $t('sections.kit') }}
+          </b-nav-item>
+          <b-nav-item :to="{ name: 'gallery' }">
+            {{ $t('sections.gallery') }}
+          </b-nav-item>
+        </b-nav>
       </b-navbar>
 
       <router-view name="options" />

src/messages/fr.json

@@ -2,9 +2,12 @@
   "title": "En françaiS au pluriel",
   "sections": {
     "home": "Accueil",
+    "introduction": "Présentation",
+    "contact": "Contact",
     "library": "Bibliothèque",
     "kit": "Kit de désapprentissage",
-    "gallery": "Créations numériques"
+    "gallery": "Créations numériques",
+    "blog": "Blog"
   },
   "bounce_texts": "Textes rebonds"
 }

src/pages/Contact.vue

@@ -0,0 +1,12 @@
+<template>
+  <component-debug :component="this" />
+</template>
+
+<script>
+export default {
+  name: 'Contact'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/Introduction.vue

@@ -0,0 +1,12 @@
+<template>
+  <component-debug :component="this" />
+</template>
+
+<script>
+export default {
+  name: 'Introduction'
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/routes.js

@@ -9,6 +9,18 @@ export default [
     component: Home
   },
 
+  {
+    name: 'introduction',
+    path: '/intro',
+    component: () => import(/* webpackChunkName: "intro" */ '@/pages/Introduction')
+  },
+
+  {
+    name: 'contact',
+    path: '/contact',
+    component: () => import(/* webpackChunkName: "contact" */ '@/pages/Contact')
+  },
+
   {
     name: 'library',
     path: '/library',
@@ -54,7 +66,7 @@ export default [
   {
     name: 'map',
     path: '/map',
-    component: () => import(/* webpackChunkName: "blog" */ '@/pages/Map')
+    component: () => import(/* webpackChunkName: "test" */ '@/pages/Map')
   },
 
   {