layout refactoring, started nominum item display

assets/css/app.scss

@@ -39,11 +39,16 @@ header[role="banner"]{
       position: relative;
       >ul{
         position: absolute;
-        top:1em; right:0;
+        top:1em; right:-1em;
         overflow: hidden;
+        padding-bottom: 0.5em;
+        background-color: white;
         >li{
+          padding:0 1em;
+          // margin-right: -1em;
           transition: height 0.3s ease-in-out;
-          height:0.2px;
+          height:0;
+          overflow: hidden;
         }
       }
       &:hover{
@@ -214,22 +219,7 @@ section[role="main-content"]{
   .index{
   }
 
-  #edition-toc{
-    max-height: 100%;
-    >header,
-    >section,
-    >nav{
-      max-height: 100%;
-      padding-top:1em;
-      padding-bottom:1em;
-    }
-
-    >section,
-    >nav{
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
-
+  #edition{
     header{
       h1{
         @include title2black;

assets/css/base/_layout.scss

@@ -38,6 +38,22 @@ body{
       overflow-y: hidden;
       overflow-x: hidden;
     }
+    .main-content-layout{
+      max-height: 100%;
+      >header,
+      >section,
+      >nav{
+        max-height: 100%;
+        padding-top:1em;
+        padding-bottom:1em;
+      }
+
+      >section,
+      >nav{
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+    }
   }
   footer[role="tools"]{
     flex:0 0 auto;

src/components/Layouts/MainContentLayout.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :id="id"
-    class="full-width row"
+    class="full-width row main-content-layout"
   >
     <header class="col-3">
       <slot name="header" />

src/pages/Edition.vue

@@ -1,5 +1,5 @@
 <template>
-  <MainContentLayout id="edition-toc">
+  <MainContentLayout id="edition">
     <template v-if="!content" #header>
       <span>Loading ...</span>
     </template>

src/pages/Nominum.vue

@@ -1,10 +1,37 @@
 <template>
   <MainContentLayout id="nominum">
-    <template v-slot:header>
-      <h1 v-if="content">{{ content.title }}</h1>
-      <span v-if="!content">Loading ...</span>
+    <template v-if="!content" v-slot:header>
+      <span class="loading">Loading ...</span>
     </template>
 
+    <template v-if="content" v-slot:header>
+      <h1>{{ content.title }}</h1>
+      <p>
+        {{ content.birthDate }}, {{ content.birthPlace }}<br>
+        {{ content.deathDate }}, {{ content.deathPlace }}
+      </p>
+    </template>
+
+    <!-- default slot -->
+    <section class="occurences">
+      <ul>
+        <li
+          v-for="ed in content.occurences"
+          :key="ed.item"
+        >
+          <h3>{{ ed.item }}</h3>
+          <ul>
+            <li
+              v-for="oc in ed.occurences"
+              :key="oc.uuid"
+            >
+              <h4>{{ oc.title }}</h4>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+
     <template v-slot:nav />
   </MainContentLayout>
 </template>