add base routes and views

src/App.vue

@@ -1,11 +1,28 @@
 <template>
   <div id="app">
     <header>
-      <h1>
-        <router-link :to="{ name: 'home' }">
+      <b-navbar toggleable="md">
+        <b-navbar-brand :to="{ name: 'home' }">
           En Français
-        </router-link>
-      </h1>
+        </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' }">
+              Bibliothèque
+            </b-nav-item>
+            <b-nav-item :to="{ name: 'kit' }">
+              Kit de désapprentissage
+            </b-nav-item>
+            <b-nav-item :to="{ name: 'gallery' }">
+              Créations numériques
+            </b-nav-item>
+          </b-navbar-nav>
+        </b-collapse>
+      </b-navbar>
+
       <router-view name="options" />
     </header>
 

src/components/globals/ComponentDebug.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="border p-3">
-    <span class="font-weight-bold">{{ component.$options.name }}</span>
-    PROPS: {{ component.$props }}
+    <div>
+      <span class="font-weight-bold">{{ component.$options.name }}</span>
+      PROPS: {{ component.$props }}
+    </div>
     <slot name="default" />
   </div>
 </template>

src/pages/Blog.vue

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

src/pages/Gallery.vue

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

src/pages/Home.vue

@@ -1,22 +1,10 @@
 <template>
-  <div class="home">
-    <b-button :to="{ name: 'biblio', query }">
-      Biblio
-    </b-button>
-  </div>
+  <component-debug :component="this">
+  </component-debug>
 </template>
 
 <script>
 export default {
-  name: 'Home',
-
-  data () {
-    return {
-      query: {
-        mode: 'card-list',
-        texts: [[1, 10, 2], [20, 5, 19]]
-      }
-    }
-  }
+  name: 'Home'
 }
 </script>

src/pages/Kit.vue

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

src/pages/Library.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script>
-import { CardList, CardMap, TreeMap, TextCard } from './biblio'
+import { CardList, CardMap, TreeMap, TextCard } from './library'
 
 
 export default {
-  name: 'Biblio',
+  name: 'Library',
 
   components: {
     CardList,

src/router/routes.js

@@ -1,4 +1,5 @@
 import Home from '@/pages/Home'
+import TextOptions from '@/pages/_partials/TextOptions'
 
 
 export default [
@@ -9,11 +10,11 @@ export default [
   },
 
   {
-    name: 'biblio',
-    path: '/biblio',
+    name: 'library',
+    path: '/library',
     components: {
-      default: () => import(/* webpackChunkName: "texts" */ '@/pages/Biblio'),
-      options: () => import(/* webpackChunkName: "texts" */ '@/pages/_partials/TextOptions')
+      default: () => import(/* webpackChunkName: "library" */ '@/pages/Library'),
+      options: TextOptions
     },
     props: {
       default: ({ query }) => ({
@@ -29,6 +30,24 @@ export default [
     }
   },
 
+  {
+    name: 'kit',
+    path: '/kit',
+    component: () => import(/* webpackChunkName: "kit" */ '@/pages/Kit')
+  },
+
+  {
+    name: 'gallery',
+    path: '/gallery',
+    component: () => import(/* webpackChunkName: "gallery" */ '@/pages/Gallery')
+  },
+
+  {
+    name: 'blog',
+    path: '/blog',
+    component: () => import(/* webpackChunkName: "blog" */ '@/pages/Blog')
+  },
+
   {
     name: 'notfound',
     path: '/404',