some styling, topics/chapters are collapsed by default

front/src/App.vue

@@ -209,14 +209,7 @@ section p {
   margin-bottom: 0;
   margin-top: 0;
 }
-section .title {
-  display: none;
-  font-weight: bold;
-  position: sticky;
-  top: 1em;
-}
-
 @media print {
-  .title { display: none; } 
+  /* .title { display: none; }  */
 }
 </style>

front/src/components/Content/Chapter.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="[ 'body', topic.title ]">    
+    <h3
+      @click="desiresContent = !desiresContent"
+      class="header"
+    >
+      <span class="expandToggle">{{ desiresContent ? '▼ ' : '► '}}</span>
+      <span>{{ topic.title }}</span>
+    </h3> 
+    <div v-if="desiresContent">
+      <span
+        v-for="message in topic.messages"
+        :key="message.id"
+      >
+      <Message
+        :message="message"
+      />
+      <span>&nbsp;</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import Message from './Message'
+
+export default {
+  name: 'Chapter',
+  components: { 
+    Message,
+  },
+  data() {
+    return {
+      desiresContent: false,
+    }
+  },
+  props: [
+    'topic',
+  ],
+}
+</script>
+
+<style scoped>
+.header {
+  cursor: pointer;
+}
+@media print {
+  .title { display: none; } 
+}
+</style>

front/src/components/Content/index.vue

@@ -1,36 +1,30 @@
 <template>
   <section :class="[ 'content', currentStream ]">
-    <div 
+    <h1 class="title">{{ currentStream }}</h1>
+    <Chapter 
       v-for="topic in sortedTopics"
       :key="topic.title"
-      :class="[ 'body', topic.title ]"
+      :topic="topic"
-    >
+    />    
-      <h1>{{ topic.title }}</h1>
-      <span
-        v-for="message in topic.messages"
-        :key="message.id"
-      >
-      <Message
-        :message="message"
-      />
-      <span>&nbsp;</span>
-      </span>
-    </div>
   </section>   
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import Message from './Message'
+import Chapter from './Chapter.vue'
 
 export default {
   name: 'Content',
   components: { 
-    Message,
+    Chapter,
+  },
+  data() {
+    return {
+      desiresContent: false,
+    }
   },
   computed: {
     ...mapState([
-      'rules',
       'currentStream'
     ]),
     ...mapGetters([
@@ -47,7 +41,4 @@ export default {
   max-width: 700px;
   background: unset;
 }
-@media print {
-  .title { display: none; } 
-}
 </style>

front/src/components/Rules/index.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="rules">
-    <p class="title">{{ $.type.name }}</p>
+    <!-- <p class="title">{{ $.type.name }}</p> -->
     <Rule
       v-for="rule in rules"
       :key="rule.id"

front/src/components/Streams/Stream.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{ selected: selected }">
     <p class="name">
       <router-link :to="stream.name">
         {{ stream.name }}
@@ -16,15 +16,21 @@ export default {
     'stream'
   ],
   computed: {
+    selected() { return this.$store.state.currentStream == this.stream.name }
   },
 }
 </script>
 
 <style scoped>
 div {
+  padding: 0.5em;
+}
+div .selected {
+  background: rgb(247, 146, 247);
 }
 div p {
   margin: 0;
 }
 
+
 </style>

front/src/components/Streams/index.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="streams">
-    <p class="title">{{ $.type.name }}</p>
+    <!-- <p class="title">{{ $.type.name }}</p> -->
     <Stream
       v-for="stream in streams"
       :key="stream.id"
@@ -29,6 +29,7 @@ export default {
 <style scoped>
 .streams {
   min-width: 10em;
+  padding: 0;
 }
 @media print {
   .streams { display: none; }