From 6a974d5ef0d3718d13796fb2df8339ea916e47fb Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Tue, 23 May 2023 15:38:49 -0500
Subject: [PATCH] Update:Epub TOC shows subitems #1787

---
 client/components/readers/Reader.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/client/components/readers/Reader.vue b/client/components/readers/Reader.vue
index e99cfe30..6532e96d 100644
--- a/client/components/readers/Reader.vue
+++ b/client/components/readers/Reader.vue
@@ -21,13 +21,18 @@
 
     <!-- TOC side nav -->
     <div v-if="tocOpen" class="w-full h-full fixed inset-0 bg-black/20 z-20" @click.stop.prevent="toggleToC"></div>
-    <div v-if="hasToC" class="w-72 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-72'" @click.stop.prevent="toggleToC">
-      <div class="p-4 h-full overflow-hidden">
+    <div v-if="hasToC" class="w-96 h-full max-h-full absolute top-0 left-0 bg-bg shadow-xl transition-transform z-30" :class="tocOpen ? 'translate-x-0' : '-translate-x-96'" @click.stop.prevent="toggleToC">
+      <div class="p-4 h-full">
         <p class="text-lg font-semibold mb-2">Table of Contents</p>
         <div class="tocContent">
           <ul>
             <li v-for="chapter in chapters" :key="chapter.id" class="py-1">
-              <a :href="chapter.href" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
+              <a :href="chapter.href" class="text-white/70 hover:text-white" @click.prevent="$refs.readerComponent.goToChapter(chapter.href)">{{ chapter.label }}</a>
+              <ul v-if="chapter.subitems.length">
+                <li v-for="subchapter in chapter.subitems" :key="subchapter.id" class="py-1 pl-4">
+                  <a :href="subchapter.href" class="text-white/70 hover:text-white" @click.prevent="$refs.readerComponent.goToChapter(subchapter.href)">{{ subchapter.label }}</a>
+                </li>
+              </ul>
             </li>
           </ul>
         </div>
@@ -146,7 +151,6 @@ export default {
     },
     openSettings() {},
     hotkey(action) {
-      console.log('Reader hotkey', action)
       if (!this.$refs.readerComponent) return
 
       if (action === this.$hotkeys.EReader.NEXT_PAGE) {
@@ -187,7 +191,6 @@ export default {
 </script>
 
 <style>
-/* @import url(@/assets/calibre/basic.css); */
 .ebook-viewer {
   height: calc(100% - 96px);
 }