From 9ffc2bf167ba8235e0f80f56edafdf882f6250d5 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Wed, 10 Mar 2021 16:30:58 +0100
Subject: [PATCH] update header with dropdown for secondary pages & add missing
 basic routes and pages

---
 src/App.vue                | 48 +++++++++++++++++++++++++-------------
 src/messages/fr.json       |  5 +++-
 src/pages/Contact.vue      | 12 ++++++++++
 src/pages/Introduction.vue | 12 ++++++++++
 src/router/routes.js       | 14 ++++++++++-
 5 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 src/pages/Contact.vue
 create mode 100644 src/pages/Introduction.vue

diff --git a/src/App.vue b/src/App.vue
index dcd0c46..0138c1d 100644
--- a/src/App.vue
+++ b/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" />
diff --git a/src/messages/fr.json b/src/messages/fr.json
index e1c4f52..5a9ecd1 100644
--- a/src/messages/fr.json
+++ b/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"
 }
diff --git a/src/pages/Contact.vue b/src/pages/Contact.vue
new file mode 100644
index 0000000..f0cc524
--- /dev/null
+++ b/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>
diff --git a/src/pages/Introduction.vue b/src/pages/Introduction.vue
new file mode 100644
index 0000000..c616e41
--- /dev/null
+++ b/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>
diff --git a/src/router/routes.js b/src/router/routes.js
index 32ad6af..07d7e32 100644
--- a/src/router/routes.js
+++ b/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')
   },
 
   {