some refactoring, better toc

assets/css/app.scss

@@ -261,14 +261,22 @@ section[role="main-content"]{
             li{
               ul{
                 overflow: hidden;
+                max-height: 1000px;
+                transition: max-height 0.5s ease-in-out;
+                // transform: scaleY(1);
+                // transform-origin: top;
+                // transition: transform 0.3s ease-in-out;
                 &:not(.opened){
-                  height:0;
+                  // height:0;
+                  max-height:0;
+                  transition: max-height 0.5s cubic-bezier(0, 1.05, 0, 1);
+                  // transform: scaleY(0);
                 }
                 // &.opened{
                 //   border: 1px solid red;
                 // }
                 // padding-left: 1em;
-                border-left: 0.5px solid $gris;
+                border-left: 0.5px solid $grisclair;
                 // min-height: 1em;
                 margin-bottom: 0em;
                 li{

assets/css/base/_colors.scss

@@ -1,5 +1,6 @@
 $bleuroi: rgb(61,82,102);
 $gris: rgb(200,204,204);
+$grisclair: rgb(230,234,234);
 $grisfonce: rgb(57,57,64);
 $or: rgb(179,161,125);
 $rouge: rgb(204,61,82);

src/components/Content/EdToc.vue

@@ -2,7 +2,7 @@
   <section>
     <ul>
       <li
-        v-for="item in content"
+        v-for="item in toc"
         :key="item.uuid"
       >
         <TocItem :item="item" :level="1" :editionid="$route.params.id" />
@@ -21,7 +21,7 @@ export default {
     TocItem
   },
   props: {
-    content: Object
+    toc: Array
   },
   data: () => ({
 

src/components/Content/TocItem.vue

@@ -8,7 +8,7 @@
       v-if="title"
       class="toc-title"
       :uuid="item.uuid"
-      v-bind:class="{active: isActive}"
+      :class="{active: isActive}"
     >
       <a
         :href="'/edition/'+editionid+'/'+item.uuid"
@@ -22,7 +22,7 @@
     <ul
       v-if="children.length"
       class="toc-list"
-      v-bind:class="{opened: isOpened}"
+      :class="{opened: isOpened}"
     >
       <li v-for="child in children" :key="child.uuid">
         <TocItem :item="child" :level="nextLevel" :editionid="editionid" />
@@ -92,7 +92,7 @@ export default {
     onclick (e) {
       console.log('clicked on toc text', this.editionid, e)
       this.$router.push({
-        name: `editiontoctext`,
+        name: `editiontext`,
         params: {
           id: this.editionid,
           textid: e.target.getAttribute('uuid')

src/pages/Edition.vue

@@ -11,7 +11,7 @@
     <EdText v-if="textdata" :textdata="textdata" />
 
     <template #nav>
-      <EdToc  :content="content" />
+      <EdToc :toc="toc" />
     </template>
   </MainContentLayout>
 </template>
@@ -24,14 +24,14 @@ import EdText from '../components/Content/EdText'
 import EdToc from '../components/Content/EdToc'
 
 export default {
-  name: 'EditionToc',
+  name: 'Edition',
   components: {
     MainContentLayout,
     EdText,
     EdToc
   },
   data: () => ({
-    content: null,
+    toc: null,
     meta: null,
     editionid: null,
     textid: null,
@@ -39,7 +39,7 @@ export default {
   }),
   watch: {
     textid: function (newid, oldid) {
-      // console.log('textid watcher', this, newid, oldid)
+      console.log('textid watcher', this, oldid, newid)
       this.getTextContent()
     }
   },
@@ -54,9 +54,14 @@ export default {
         this.meta = data.meta
         if (data.content) {
           if (Array.isArray(data.content)) {
-            this.content = data.content
+            this.toc = data.content
           } else {
-            this.content = [data.content]
+            this.toc = [data.content]
+          }
+          // if front page get the first item in toc
+          if (!this.$route.params.textid) {
+            // console.log('toc', this.toc)
+            this.textid = this.toc[0].children[1].uuid
           }
         }
       })
@@ -69,7 +74,6 @@ export default {
     // get the text if textid available
     if (this.$route.params.textid) {
       this.textid = this.$route.params.textid
-      // this.getTextContent()
     }
   },
   beforeRouteUpdate (to, from, next) {

src/pages/ListCorpus.vue

@@ -76,7 +76,7 @@ export default {
     onclick (e) {
       console.log('clicked on editon', e)
       this.$router.push({
-        name: `editiontoc`,
+        name: `edition`,
         params: { id: e.target.getAttribute('uuid') }
       })
     }

src/router/index.js

@@ -5,7 +5,7 @@ import Home from 'pages/Home'
 import Item from 'pages/Item'
 import ListCorpus from 'pages/ListCorpus'
 // import Corpus from 'pages/Corpus'
-import EditionToc from 'pages/EditionToc'
+import Edition from 'pages/Edition'
 import IndexNominum from 'pages/IndexNominum'
 import IndexLocorum from 'pages/IndexLocorum'
 import IndexOperum from 'pages/IndexOperum'
@@ -39,14 +39,14 @@ const routes = [
   //   component: Corpus
   // },
   {
-    name: 'editiontoc',
+    name: 'edition',
     path: '/edition/:id',
-    component: EditionToc
+    component: Edition
   },
   {
-    name: 'editiontoctext',
+    name: 'editiontext',
     path: '/edition/:id/:textid',
-    component: EditionToc
+    component: Edition
   },
   {
     name: 'indexNominum',