table of contents in pages

docs/.vuepress/theme/components/Navbar.vue

@@ -8,7 +8,7 @@
     <!-- <v-text-field flat solo-inverted hide-details prepend-inner-icon="mdi-magnify" label="Search" class="hidden-sm-and-down" /> -->
     <v-spacer />
     <v-btn @click.stop="setRightDrawer" icon v-if="hasRightDrawer">
-      <v-icon>mdi-format-list-bulleted</v-icon>
+      <v-icon>{{ rightDrawerIcon }}</v-icon>
     </v-btn>
   </v-app-bar>
 </template>
@@ -39,6 +39,17 @@ export default {
     },
     hasRightDrawer() {
       return this.$store.state.hasRightDrawer
+    },
+    inRightDrawer() {
+      return this.$store.state.inRightDrawer
+    },
+    rightDrawerIcon() {
+      if (this.inRightDrawer == 'pageToc') {
+        return 'mdi-format-list-bulleted'
+      } else if (this.inRightDrawer == 'spellFilters') {
+        return 'mdi-filter-variant'
+      }
+      return 'mdi-menu'
     }
   },
 

docs/.vuepress/theme/components/PageToc.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="page-toc mt-4">
+    <p class="subtitle-2 pl-6 pr-6">Table des matières</p>
+    <ul>
+      <li :class="[ itemPadding(h), 'mb-1' ]" v-for="h in headers">
+        <a :href="anchor(h)">{{ h.title }}</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageToc',
+
+  data () {
+    return {
+
+    }
+  },
+
+  computed: {
+    headers () {
+      return this.$page.headers
+    }
+  },
+
+  methods: {
+    anchor (h) {
+      return '#' + h.slug
+    },
+    itemPadding (h) {
+      return 'pl-' + (h.level - 2) * 4
+    }
+  },
+
+  mounted () {
+    
+  }
+}
+</script>
+
+<style lang="scss">
+@import '../styles/colors';
+
+.page-toc {
+  ul {
+    list-style: none;
+    padding-right: 24px;
+
+    li {
+      a {
+        color: $color-gray;
+        text-decoration: none;
+
+        &:hover {
+          color: $color-dragon;
+        }
+      }
+    }
+  }
+}
+</style>

docs/.vuepress/theme/components/RightDrawer.vue

@@ -1,17 +1,20 @@
 <template>
   <v-navigation-drawer class="right-drawer" v-model="rightDrawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app right>
+    <PageToc v-if="hasPageToc" />
     <SpellFilters v-if="hasSpellFilters" />
   </v-navigation-drawer>
 </template>
 
 <script>
-import SpellFilters from '@theme/components/SpellFilters.vue'
+import PageToc from '@theme/components/PageToc'
+import SpellFilters from '@theme/components/SpellFilters'
 
 export default {
   name: 'RightDrawer',
 
   components: {
-    SpellFilters
+    SpellFilters,
+    PageToc
   },
 
   data () {
@@ -28,9 +31,12 @@ export default {
         this.$store.commit('setRightDrawer', newValue)
       }
     },
+    hasPageToc () {
+      return this.$store.state.inRightDrawer == 'pageToc'
+    },
     hasSpellFilters () {
       return this.$store.state.inRightDrawer == 'spellFilters'
-    }
+    },
   },
 
   mounted () {

docs/.vuepress/theme/components/SpellFilters.vue

@@ -325,6 +325,9 @@ export default {
   },
 
   mounted () {
+    console.log('filter mounted')
+    this.$store.dispatch('spellFilters/reset')
+
     let selectedSchools = getUrlParameter(window.location.href, "ecoles").split(",")
     let selectedClasses = getUrlParameter(window.location.href, "classes").split(",")
     let selectedLevels = getUrlParameter(window.location.href, "niveaux").split(",")