add optional header part for options & add biblio view with mode as component

src/App.vue

@@ -1,18 +1,21 @@
 <template>
   <div id="app">
-    <!-- <header>
+    <header>
       <h1>
-        <router-link :to="{ name: 'home' }">En Français</router-link>
+        <router-link :to="{ name: 'home' }">
+          En Français
+        </router-link>
       </h1>
-    </header> -->
+      <router-view name="options" />
+    </header>
 
     <main id="main">
       <router-view />
     </main>
 
-    <!-- <footer>
+    <footer>
       <p>footer</p>
-    </footer> -->
+    </footer>
   </div>
 </template>
 

src/pages/Biblio.vue

@@ -0,0 +1,27 @@
+<template>
+  <component-debug :component="this">
+    <component :is="mode" />
+  </component-debug>
+</template>
+
+<script>
+import { CardList, CardMap, TreeMap } from './biblio'
+
+
+export default {
+  name: 'Biblio',
+
+  components: {
+    CardList,
+    CardMap,
+    TreeMap
+  },
+
+  props: {
+    mode: { type: String, required: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/pages/_partials/TextOptions.vue

@@ -0,0 +1,16 @@
+<template>
+  <component-debug :component="this" v-if="show" />
+</template>
+
+<script>
+export default {
+  name: 'TextOptions',
+
+  props: {
+    show: { type: Boolean, default: true }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/router/routes.js

@@ -8,6 +8,23 @@ export default [
     component: Home
   },
 
+  {
+    name: 'biblio',
+    path: '/biblio',
+    components: {
+      default: () => import(/* webpackChunkName: "texts" */ '@/pages/Biblio'),
+      options: () => import(/* webpackChunkName: "texts" */ '@/pages/_partials/TextOptions')
+    },
+    props: {
+      default: ({ query }) => ({
+        mode: query.mode || 'tree-map'
+      }),
+      options: ({ query }) => ({
+        show: !('texts' in query)
+      })
+    }
+  },
+
   {
     name: 'notfound',
     path: '/404',