From cdc26f9fd7b285ef337f027bf96fd2643a97db00 Mon Sep 17 00:00:00 2001
From: yileifeng <fengyilei1@gmail.com>
Date: Tue, 17 Dec 2024 13:10:40 -0500
Subject: [PATCH] add sublists for vertical ToC

---
 ...000000-0000-0000-0000-000000000000_fr.json |  83 ++++
 src/components/story/chapter-menu.vue         | 385 +++++++++++++++---
 src/components/story/horizontal-menu.vue      | 110 ++---
 src/components/story/story-content.vue        |   2 +-
 4 files changed, 468 insertions(+), 112 deletions(-)

diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
index aca38e3d..fb6f6937 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
@@ -329,6 +329,89 @@
             ]
         }
     ],
+    "tableOfContents": [
+        {
+            "title": "Apercu",
+            "slideIndex": 0,
+            "sublist": [
+                {
+                    "title": "Gisements de sables bitumineux",
+                    "slideIndex": 1
+                }
+            ]
+        },
+        {
+            "title": "Extraction de sables bitumineux",
+            "slideIndex": 2,
+            "sublist": [
+                {
+                    "title": "Extraction des sables bitumineux (2)",
+                    "slideIndex": 3
+                },
+                {
+                    "title": "Où sont situées les installations?",
+                    "slideIndex": 4
+                }
+            ]
+        },
+        {
+            "title": "Substances de l'INRP déclarées par les installations d’exploitation minière de sables bitumineux",
+            "slideIndex": 5,
+            "sublist": [
+                {
+                    "title": "Substances de l'INRP déclarées par les installations d’exploitation minière de sables bitumineux MAP",
+                    "slideIndex": 6
+                },
+                {
+                    "title": "Rejets de principaux contaminants atmosphériques de mines de sables bitumineux",
+                    "slideIndex": 7
+                },
+                {
+                    "title": "Résidus miniers déclarés par les installations d’exploitation minière à ciel ouvert des sables bitumineux",
+                    "slideIndex": 8
+                },
+                {
+                    "title": "Résidus miniers déclarés à l’INRP par les installations d’exploitation minière à ciel ouvert de sables bitumineux",
+                    "slideIndex": 9
+                },
+                {
+                    "title": "Résidus miniers déclarés à l’INRP par les installations d’exploitation minière à ciel ouvert de sables bitumineux MAP",
+                    "slideIndex": 10
+                }
+            ]
+        },
+        {
+            "title": "Tendances dans les résidus miniers déclarés par les installations d’exploitation minière à ciel ouvert",
+            "slideIndex": 11
+        },
+        {
+            "title": "Installations in situ",
+            "slideIndex": 12,
+            "sublist": [
+                {
+                    "title": "Rejets à l’air déclarés par les installations in situ",
+                    "slideIndex": 13
+                },
+                {
+                    "title": "Tendances entourant les substances déclarées à l’INRP par les installations in situ",
+                    "slideIndex": 14
+                },
+                {
+                    "title": "Rejets à l’air déclarés à l’INRP par les installations in situ",
+                    "slideIndex": 15
+                },
+                {
+                    "title": "Gestion des répercussions sur l’environnement",
+                    "slideIndex": 16
+                }
+            ]
+        },
+        {
+            "title": "Finale",
+            "slideIndex": 17
+        }
+    ],
+    "returnTop": false,
     "contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html",
     "contextLabel": "Explore National Pollutant Release Inventory data",
     "lang": "en",
diff --git a/src/components/story/chapter-menu.vue b/src/components/story/chapter-menu.vue
index b3d9f821..d6209fcb 100644
--- a/src/components/story/chapter-menu.vue
+++ b/src/components/story/chapter-menu.vue
@@ -143,71 +143,262 @@
                     }}</span>
                 </router-link>
             </li>
-            <li v-for="(slide, idx) in slides" :key="idx" :class="{ 'is-active': lastActiveIdx === slide.index }">
-                <!-- using router-link causes a page refresh which breaks plugin -->
-                <a
-                    class="flex items-center px-2 py-1 mx-1 cursor-pointer"
-                    @click="scrollToChapter(`${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}`)"
-                    v-tippy="{
-                        delay: '200',
-                        placement: 'right',
-                        content: slide.title,
-                        animateFill: true,
-                        animation: 'chapter-menu'
+
+            <!-- Build custom configured table of contents -->
+            <template v-if="customToc">
+                <li
+                    v-for="(item, idx) in customToc"
+                    :key="idx"
+                    :class="{
+                        'is-active': lastActiveIdx === item.slideIndex
                     }"
-                    v-if="plugin"
                 >
-                    <svg
-                        class="flex-shrink-0"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="#fff"
-                        stroke="#878787"
-                    >
-                        <path
-                            d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
-                            stroke-width=".93974"
-                        />
-                    </svg>
-                    <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                        slide.title
-                    }}</span>
-                </a>
+                    <div class="flex">
+                        <!-- using router-link causes a page refresh which breaks plugin -->
+                        <a
+                            class="flex flex-grow items-center px-2 py-1 mx-1 min-w-0 cursor-pointer"
+                            @click="scrollToChapter(getSlideId(item.slideIndex))"
+                            v-tippy="{
+                                delay: '200',
+                                placement: 'right',
+                                content: getTitle(item),
+                                animateFill: true,
+                                animation: 'chapter-menu'
+                            }"
+                            v-if="plugin"
+                        >
+                            <svg
+                                class="flex-shrink-0"
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="#fff"
+                                stroke="#878787"
+                            >
+                                <path
+                                    d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
+                                    stroke-width=".93974"
+                                />
+                            </svg>
+                            <span
+                                class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap"
+                                >{{ getTitle(item) }}</span
+                            >
+                        </a>
 
-                <router-link
-                    :to="{ hash: `#${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}` }"
-                    class="flex items-center px-2 py-1 mx-1"
-                    target
-                    v-tippy="{
-                        delay: '200',
-                        placement: 'right',
-                        content: slide.title,
-                        animateFill: true,
-                        animation: 'chapter-menu'
-                    }"
-                    v-else
+                        <router-link
+                            :to="{ hash: `#${getSlideId(item.slideIndex)}` }"
+                            class="flex flex-grow items-center px-2 py-1 mx-1 min-w-0"
+                            target
+                            v-tippy="{
+                                delay: '200',
+                                placement: 'right',
+                                content: getTitle(item),
+                                animateFill: true,
+                                animation: 'chapter-menu'
+                            }"
+                            v-else
+                        >
+                            <svg
+                                class="flex-shrink-0"
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="#fff"
+                                stroke="#878787"
+                            >
+                                <path
+                                    d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
+                                    stroke-width=".93974"
+                                />
+                            </svg>
+                            <span
+                                class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap"
+                                >{{ getTitle(item) }}</span
+                            >
+                        </router-link>
+
+                        <button
+                            class="mr-2"
+                            v-if="item.sublist && item.sublist.length && isMenuOpen"
+                            @click="toggleSublist(idx)"
+                        >
+                            <svg
+                                data-v-b1261e08=""
+                                xmlns="http://www.w3.org/2000/svg"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                width="18"
+                                class="rotate-180"
+                                v-if="isSublistToggled(idx)"
+                            >
+                                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
+                            </svg>
+                            <svg
+                                data-v-b1261e08=""
+                                xmlns="http://www.w3.org/2000/svg"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                width="18"
+                                v-else
+                            >
+                                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
+                            </svg>
+                        </button>
+                    </div>
+
+                    <!-- Dropdown for sublists -->
+                    <ul v-show="isSublistToggled(idx)" class="dropdown-menu">
+                        <li
+                            v-for="(subItem, subIdx) in item.sublist"
+                            :key="subIdx"
+                            :class="{
+                                'is-active': lastActiveIdx === subItem.slideIndex
+                            }"
+                        >
+                            <a
+                                class="flex items-center px-2 py-1 mx-1"
+                                @click="scrollToChapter(getSlideId(subItem.slideIndex))"
+                                v-tippy="{
+                                    delay: '200',
+                                    placement: 'right',
+                                    content: subItem.title,
+                                    animateFill: true,
+                                    animation: 'chapter-menu'
+                                }"
+                                v-if="plugin"
+                            >
+                                <svg
+                                    class="flex-shrink-0"
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="#fff"
+                                    stroke="#878787"
+                                >
+                                    <path
+                                        d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
+                                        stroke-width=".93974"
+                                    />
+                                </svg>
+                                <span
+                                    class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap pl-8"
+                                    >{{ subItem.title }}</span
+                                >
+                            </a>
+
+                            <router-link
+                                :to="{ hash: `#${getSlideId(subItem.slideIndex)}` }"
+                                class="flex items-center px-2 py-1 mx-1"
+                                target
+                                v-tippy="{
+                                    delay: '200',
+                                    placement: 'right',
+                                    content: subItem.title,
+                                    animateFill: true,
+                                    animation: 'chapter-menu'
+                                }"
+                                v-else
+                            >
+                                <svg
+                                    class="flex-shrink-0"
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="#fff"
+                                    stroke="#878787"
+                                >
+                                    <path
+                                        d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
+                                        stroke-width=".93974"
+                                    />
+                                </svg>
+                                <span
+                                    class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap pl-8"
+                                    >{{ subItem.title }}</span
+                                >
+                            </router-link>
+                        </li>
+                    </ul>
+                </li>
+            </template>
+
+            <!-- Default table of contents -->
+            <template v-else>
+                <li
+                    v-for="(slide, idx) in tocSlides"
+                    :key="idx"
+                    :class="{ 'is-active': lastActiveIdx === slide.index }"
                 >
-                    <svg
-                        class="flex-shrink-0"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="#fff"
-                        stroke="#878787"
+                    <!-- using router-link causes a page refresh which breaks plugin -->
+                    <a
+                        class="flex items-center px-2 py-1 mx-1 cursor-pointer"
+                        @click="scrollToChapter(`${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}`)"
+                        v-tippy="{
+                            delay: '200',
+                            placement: 'right',
+                            content: slide.title,
+                            animateFill: true,
+                            animation: 'chapter-menu'
+                        }"
+                        v-if="plugin"
                     >
-                        <path
-                            d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
-                            stroke-width=".93974"
-                        />
-                    </svg>
-                    <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                        slide.title
-                    }}</span>
-                </router-link>
-            </li>
+                        <svg
+                            class="flex-shrink-0"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="#fff"
+                            stroke="#878787"
+                        >
+                            <path
+                                d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
+                                stroke-width=".93974"
+                            />
+                        </svg>
+                        <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                            slide.title
+                        }}</span>
+                    </a>
+
+                    <router-link
+                        :to="{ hash: `#${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}` }"
+                        class="flex items-center px-2 py-1 mx-1"
+                        target
+                        v-tippy="{
+                            delay: '200',
+                            placement: 'right',
+                            content: slide.title,
+                            animateFill: true,
+                            animation: 'chapter-menu'
+                        }"
+                        v-else
+                    >
+                        <svg
+                            class="flex-shrink-0"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="#fff"
+                            stroke="#878787"
+                        >
+                            <path
+                                d="m19.325 16.229c-2.4415 1.4096-4.8829 2.8191-7.3244 4.2286-2.4415-1.4096-4.883-2.8192-7.3245-4.2288-3.55e-5 -2.8191-7.1e-5 -5.6383-1.066e-4 -8.4574 2.4415-1.4096 4.8829-2.8191 7.3244-4.2286 2.4415 1.4096 4.883 2.8192 7.3245 4.2288 3.7e-5 2.8191 7.4e-5 5.6383 1.1e-4 8.4574z"
+                                stroke-width=".93974"
+                            />
+                        </svg>
+                        <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                            slide.title
+                        }}</span>
+                    </router-link>
+                </li>
+            </template>
             <div class="h-10 flex-shrink-0"></div>
         </ul>
     </div>
@@ -215,8 +406,8 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { ref, watch, onMounted } from 'vue';
-import { Slide } from '@storylines/definitions';
+import { computed, ref, watch, onMounted } from 'vue';
+import { MenuItem, Slide } from '@storylines/definitions';
 
 const props = defineProps({
     returnToTop: {
@@ -227,6 +418,10 @@ const props = defineProps({
         type: Array as PropType<Array<Slide>>,
         required: true
     },
+    customToc: {
+        type: Array as PropType<Array<MenuItem>>,
+        required: false
+    },
     activeChapterIndex: {
         type: Number,
         required: true
@@ -245,6 +440,17 @@ const isMenuOpen = ref(false);
 const introExists = ref(false);
 const lastActiveIdx = ref(-1);
 
+const sublistToggled = ref({} as Record<number, boolean>);
+
+// filter out which slides are visible in the table of contents while preserving original slide index
+const tocSlides = computed(() => {
+    const slides = props.slides.map((slide, idx) => ({ ...slide, index: idx }));
+    if (!props.customToc) {
+        slides.filter((slide) => slide.includeInToc !== false);
+    }
+    return slides;
+});
+
 watch(
     () => props.activeChapterIndex,
     () => {
@@ -255,6 +461,11 @@ watch(
 onMounted(() => {
     const introSection = document.getElementById('intro');
     introExists.value = !!introSection;
+    if (props.customToc) {
+        props.customToc.forEach((item, idx) => {
+            sublistToggled.value[idx] = false;
+        });
+    }
 });
 
 const scrollToChapter = (id: string): void => {
@@ -264,8 +475,25 @@ const scrollToChapter = (id: string): void => {
     }
 };
 
+const getTitle = (slide: Slide | MenuItem): string => {
+    return slide.title !== '' ? slide.title : t('chapters.untitled');
+};
+
+const getSlideId = (slideIdx: number): string => {
+    const slide = props.slides.find((slide, idx) => idx === slideIdx);
+    return slide ? `${slideIdx}-${slide.title.toLowerCase().replaceAll(' ', '-')}` : '';
+};
+
+const toggleSublist = (index: number): void => {
+    sublistToggled.value[index] = !sublistToggled.value[index];
+};
+
+const isSublistToggled = (index: number): boolean => {
+    return sublistToggled.value[index];
+};
+
 const updateActiveIdx = () => {
-    const prevSlides = props.slides.filter((slide) => slide.index <= props.activeChapterIndex);
+    const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
     lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
 };
 </script>
@@ -287,7 +515,7 @@ const updateActiveIdx = () => {
     display: none; /* Safari and Chrome */
 }
 
-.menu li {
+.menu > li {
     a:hover {
         text-decoration: none;
         color: inherit;
@@ -317,4 +545,33 @@ const updateActiveIdx = () => {
         }
     }
 }
+
+.dropdown-menu {
+    > li {
+        font-weight: normal;
+        svg {
+            fill: #fff !important;
+            stroke: #878787 !important;
+        }
+
+        span {
+            font-weight: normal !important;
+        }
+
+        &.is-active {
+            span {
+                font-weight: bold !important;
+            }
+
+            svg {
+                fill: var(--sr-accent-colour) !important;
+                stroke: var(--sr-accent-colour) !important;
+            }
+        }
+    }
+}
+
+.rotate-180 {
+    transform: rotate(-180deg);
+}
 </style>
diff --git a/src/components/story/horizontal-menu.vue b/src/components/story/horizontal-menu.vue
index 56a9a9ae..2c138da6 100644
--- a/src/components/story/horizontal-menu.vue
+++ b/src/components/story/horizontal-menu.vue
@@ -46,48 +46,68 @@
                     :class="{
                         'is-active': lastActiveIdx === item.slideIndex
                     }"
-                    @mouseenter="showSublist(idx)"
-                    @mouseleave="hideSublist(idx)"
                 >
-                    <!-- using router-link causes a page refresh which breaks plugin -->
-                    <a
-                        class="flex items-center px-2 py-4 cursor-pointer"
-                        @click="scrollToChapter(getSlideId(item.slideIndex))"
-                        @focus="showSublist(idx)"
-                        @blur="hideSublist(idx)"
-                        v-tippy="{
-                            delay: '200',
-                            placement: 'right',
-                            content: getTitle(item),
-                            animateFill: true,
-                            animation: 'chapter-menu'
-                        }"
-                        v-if="plugin"
-                    >
-                        <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                            getTitle(item)
-                        }}</span>
-                    </a>
-
-                    <router-link
-                        :to="{ hash: `#${getSlideId(item.slideIndex)}` }"
-                        @focus="showSublist(idx)"
-                        @blur="hideSublist(idx)"
-                        class="flex items-center px-2 py-1 pb-2"
-                        target
-                        v-tippy="{
-                            delay: '200',
-                            placement: 'right',
-                            content: getTitle(item),
-                            animateFill: true,
-                            animation: 'chapter-menu'
-                        }"
-                        v-else
-                    >
-                        <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                            getTitle(item)
-                        }}</span>
-                    </router-link>
+                    <div class="flex">
+                        <!-- using router-link causes a page refresh which breaks plugin -->
+                        <a
+                            class="flex flex-grow items-center px-2 py-4 min-w-0 cursor-pointer"
+                            @click="scrollToChapter(getSlideId(item.slideIndex))"
+                            v-tippy="{
+                                delay: '200',
+                                placement: 'right',
+                                content: getTitle(item),
+                                animateFill: true,
+                                animation: 'chapter-menu'
+                            }"
+                            v-if="plugin"
+                        >
+                            <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                                getTitle(item)
+                            }}</span>
+                        </a>
+
+                        <router-link
+                            :to="{ hash: `#${getSlideId(item.slideIndex)}` }"
+                            class="flex flex-grow items-center px-2 py-1 pb-2 min-w-0"
+                            target
+                            v-tippy="{
+                                delay: '200',
+                                placement: 'right',
+                                content: getTitle(item),
+                                animateFill: true,
+                                animation: 'chapter-menu'
+                            }"
+                            v-else
+                        >
+                            <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                                getTitle(item)
+                            }}</span>
+                        </router-link>
+
+                        <button class="mr-2" v-if="item.sublist && item.sublist.length" @click="toggleSublist(idx)">
+                            <svg
+                                data-v-b1261e08=""
+                                xmlns="http://www.w3.org/2000/svg"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                width="18"
+                                class="rotate-180"
+                                v-if="isSublistToggled(idx)"
+                            >
+                                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
+                            </svg>
+                            <svg
+                                data-v-b1261e08=""
+                                xmlns="http://www.w3.org/2000/svg"
+                                height="18"
+                                viewBox="0 0 24 24"
+                                width="18"
+                                v-else
+                            >
+                                <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
+                            </svg>
+                        </button>
+                    </div>
 
                     <!-- Dropdown for sublists -->
                     <ul v-show="isSublistToggled(idx)" class="dropdown-menu">
@@ -277,12 +297,8 @@ const getSlideId = (slideIdx: number): string => {
     return slide ? `${slideIdx}-${slide.title.toLowerCase().replaceAll(' ', '-')}` : '';
 };
 
-const showSublist = (index: number): void => {
-    sublistToggled.value[index] = true;
-};
-
-const hideSublist = (index: number): void => {
-    sublistToggled.value[index] = false;
+const toggleSublist = (index: number): void => {
+    sublistToggled.value[index] = !sublistToggled.value[index];
 };
 
 const isSublistToggled = (index: number): boolean => {
diff --git a/src/components/story/story-content.vue b/src/components/story/story-content.vue
index f7d089dc..b2438d6b 100644
--- a/src/components/story/story-content.vue
+++ b/src/components/story/story-content.vue
@@ -19,7 +19,7 @@
             :active-chapter-index="activeChapterIndex"
             :return-to-top="config.returnTop ?? true"
             :slides="config.slides"
-            :customToc:="config.tableOfContents"
+            :customToc="config.tableOfContents"
             :plugin="!!configFileStructure || !!plugin"
             :lang="lang"
             v-else