reorganisation du code

components/navigation.vue → components/navigation/Bar.vue

 <template>
-<header>
-  <div class="position-relative">
-    <button class="toggle btn border-secondary position-absolute p-1 m-3" @click="toggleMenu"><span></span></button>
-    <breadcrumb :breadcrumb="breadcrumb" class="ml-5 py-3 px-4" />
-  </div>
-  <navmenu @toggleMenu="toggleMenu" />
-  <div class="bg_overlay" @click="toggleMenu"></div>
-</header>
+  <header>
+    <div class="position-relative">
+      <button class="toggle btn border-secondary position-absolute p-1 m-3" @click="toggleMenu"><span></span></button>
+      <NavigationBreadcrumb :breadcrumb="breadcrumb" class="ml-5 py-3 px-4" />
+    </div>
+    <NavigationMenuSidebar @toggleMenu="toggleMenu" />
+    <div class="bg_overlay" @click="toggleMenu"></div>
+  </header>
 </template>
 
 <script>
-import breadcrumb from './breadcrumb.vue'
-import navmenu from './navmenu.vue'
-
 export default {
-  components: {
-    breadcrumb,
-    navmenu
-  },
   methods: {
     toggleMenu() {
       document.querySelector('.app').classList.toggle('open')

components/navmenu.vue → components/navigation/menu/Sidebar.vue

@@ -7,35 +7,31 @@
             </button>
         </div>
         <nav class="navbar-light">
-            <ssMenu v-for="menu in menus" :key="menu.title" :menu="menu"/>
+            <NavigationMenuGroup v-for="menu in menus" :key="menu.title" :menu="menu"/>
         </nav>
     </aside>
 </template>
 
 <script>
-import ssMenu from './ssMenu.vue'
-
 export default {
     data() {
         return {
             menus : [
-                {title: 'Développement',
+                {
+                title: 'Développement',
                 items : [
                     {path: '/explore',title: 'Explorer la toile de confiance'},
                     {path: '/appolo',title: 'Appolo'}
                 ]},
-                {title: 'Pages',
+                {
+                title: 'Un menu',
                 items : [
-                    {path: '/hoho',title: 'Hoho'},
-                    {path: '/hihi',title: 'Hihi'},
-                    {path: '/haha',title: 'Haha'}
+                    {path: '/lien',title: 'Un lien'},
+                    {path: '/autrelien',title: 'Un aure lien'}
                 ]}
             ]
         }
     },
-    components: {
-        ssMenu
-    },
     methods: {
         toggleMenu() {
             this.$emit('toggleMenu')

layouts/default.vue

 <template>
     <div class="app">
-        <Navigation :breadcrumb="breadcrumb" />
+        <NavigationBar :breadcrumb="breadcrumb" />
         <Nuxt />
     </div>
 </template>

mixins/wotwizard.js

@@ -4,8 +4,7 @@ export default {
             WWZ_URL : "https://wwgql.coinduf.eu",
             WWZ_REQUEST_VERSION : "{version}",
             query: "",
-            retour : null,
-            isWaiting: false
+            retour : null
         }
     },
     methods: {
@@ -13,8 +12,6 @@ export default {
         WWZ_REQUEST_DETAILS(hint) { return `{idSearch(with:{hint:\\"${hint}\\"}){ids{pubkey,uid,status}}}` },
     },
     async fetch() {
-        this.isWaiting = true
-
         this.retour = await fetch(this.WWZ_URL, {
             method: 'POST',
             headers: {
@@ -22,10 +19,8 @@ export default {
             },
             body: '{"query":"' + this.query + '"}'
         }).then((res) => {
-            this.isWaiting = false
             return res.json()
         }).catch((error) => {
-            this.isWaiting = false
             return {errors: error}
         })
     },

pages/explore.vue

@@ -9,11 +9,11 @@
           <input type="text" class="form-control" id="rech" aria-describedby="rechHelp" v-model="search">
           <small id="rechHelp" class="form-text text-muted">Saisissez le début d'un pseudo ou d'une clé publique</small>
         </div>
-        <btnloading :isWaiting="isWaiting"/>
+        <btnloading :isWaiting="$fetchState.pending"/>
       </form>
     </div>
   </div>
-  <div class="row" v-if="retour && !isWaiting">
+  <div class="row" v-if="retour && !$fetchState.pending">
     <div class="col-8 m-auto">
       <p v-if="retour.errors" class="alert alert-danger">{{ retour.errors }}</p>
       <div class="table-responsive" v-else>