add active state to children text links

src/components/text/TextCard.vue

@@ -14,10 +14,11 @@
             </template>
           </h4>
 
-          <b-nav class="ml-auto flex-nowrap">
+          <b-nav class="ml-auto flex-nowrap" pills>
             <b-nav-item
               v-for="child in text.children" :key="child.id"
               @click="$emit('open', id, child.id)"
+              :active="children.includes(child.id)"
             >
               {{ child.id }}
             </b-nav-item>
@@ -67,7 +68,8 @@ export default {
   name: 'TextCard',
 
   props: {
-    id: { type: Number, required: true }
+    id: { type: Number, required: true },
+    children: { type: Array, default: null }
   },
 
   data () {

src/pages/Library.vue

@@ -5,7 +5,11 @@
 
     <!-- FOREGROUND (texts) -->
     <section v-for="parent in parents" :key="parent.id" class="split-screen">
-      <text-card :id="parent.id" @open="openText" @close="closeText" />
+      <text-card
+        :id="parent.id"
+        :children="parent.children"
+        @open="openText" @close="closeText"
+      />
       <div>
         <text-card
           v-for="id in parent.children" :key="id"