chapter expand / collaspe

front/src/App.vue

@@ -191,7 +191,7 @@ section p {
 }
 @media print {
   .title {
-    display: none;
+    /* display: none; */
   }
 }
 </style>

front/src/components/Content/index.vue

@@ -1,30 +1,25 @@
 <template>
   <section :class="['content', currentStream]">
-    <div
+    <h1 class="title"> {{ currentStream }} </h1>
+    <Chapter
       v-for="topic in sortedTopics"
       :key="topic.title"
-      :class="['body', topic.title]"
-    >
-      <h1>{{ topic.title }}</h1>
-      <span v-for="message in topic.messages" :key="message.id">
-        <Message :message="message" />
-        <span>&nbsp;</span>
-      </span>
-    </div>
+      :topic="topic"
+    />
   </section>
 </template>
 
 <script>
 import { mapGetters, mapState } from "vuex";
-import Message from "./Message";
+import Chapter from './Chapter.vue';
 
 export default {
   name: "Content",
   components: {
-    Message,
+    Chapter,
   },
   computed: {
-    ...mapState(["rules", "currentStream"]),
+    ...mapState(["currentStream"]),
     ...mapGetters(["sortedTopics"]),
   },
   methods: {},
@@ -38,7 +33,7 @@ export default {
 }
 @media print {
   .title {
-    display: none;
+    /* display: none; */
   }
 }
 </style>