From c012a28aa88e01ce77566edcf159330e31bbdfd4 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 8 Mar 2021 16:34:00 +0100
Subject: [PATCH] add base routes and views

---
 src/App.vue                               | 25 +++++++++++++++++----
 src/components/globals/ComponentDebug.vue |  6 +++--
 src/pages/Blog.vue                        | 12 ++++++++++
 src/pages/Gallery.vue                     | 12 ++++++++++
 src/pages/Home.vue                        | 18 +++------------
 src/pages/Kit.vue                         | 12 ++++++++++
 src/pages/Library.vue                     |  4 ++--
 src/router/routes.js                      | 27 +++++++++++++++++++----
 8 files changed, 89 insertions(+), 27 deletions(-)
 create mode 100644 src/pages/Blog.vue
 create mode 100644 src/pages/Gallery.vue
 create mode 100644 src/pages/Kit.vue

diff --git a/src/App.vue b/src/App.vue
index 2560274..d7c3051 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/components/globals/ComponentDebug.vue b/src/components/globals/ComponentDebug.vue
index 97eef72..8799b96 100644
--- a/src/components/globals/ComponentDebug.vue
+++ b/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>
diff --git a/src/pages/Blog.vue b/src/pages/Blog.vue
new file mode 100644
index 0000000..5fb6ae1
--- /dev/null
+++ b/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>
diff --git a/src/pages/Gallery.vue b/src/pages/Gallery.vue
new file mode 100644
index 0000000..ff287e8
--- /dev/null
+++ b/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>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 66a4084..fb11077 100644
--- a/src/pages/Home.vue
+++ b/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>
diff --git a/src/pages/Kit.vue b/src/pages/Kit.vue
new file mode 100644
index 0000000..e112279
--- /dev/null
+++ b/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>
diff --git a/src/pages/Library.vue b/src/pages/Library.vue
index 1ef4201..d51f3a0 100644
--- a/src/pages/Library.vue
+++ b/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,
diff --git a/src/router/routes.js b/src/router/routes.js
index 762f819..a457646 100644
--- a/src/router/routes.js
+++ b/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',