From 0c765904a63fd7bbf7d19bf3c27045b0d973d84f Mon Sep 17 00:00:00 2001
From: Yi Lei Feng <fengyilei1@gmail.com>
Date: Mon, 16 Dec 2024 11:40:57 -0500
Subject: [PATCH 1/3] add sublist menus for horizontal ToC

---
 StoryRampSchema.json                          |  40 +++
 ...000000-0000-0000-0000-000000000000_en.json | 106 ++++++-
 src/components/story/horizontal-menu.vue      | 259 ++++++++++++++----
 src/components/story/story-content.vue        |  13 +-
 src/definitions.ts                            |  14 +-
 5 files changed, 376 insertions(+), 56 deletions(-)

diff --git a/StoryRampSchema.json b/StoryRampSchema.json
index 7e56bc3c..d8ed8743 100644
--- a/StoryRampSchema.json
+++ b/StoryRampSchema.json
@@ -687,6 +687,46 @@
             "minItems": 1
         },
 
+        "tableOfContents": {
+            "type": "array",
+            "description": "Defines a custom table of contents structure.",
+            "items": {
+                "type": "object",
+                "description": "A table of contents item that resides on the root level.",
+                "properties": {
+                    "title": {
+                        "type": "string",
+                        "description": "Title description of table of contents item."
+                    },
+                    "slideIndex": {
+                        "type": "number",
+                        "description": "Slide index linked to this table of contents item."
+                    },
+                    "sublist": {
+                        "type": "array",
+                        "description": "List of sublist items that stem from this table of contents item.",
+                        "items": {
+                            "type": "object",
+                            "description": "A table of contents child item that resides inside a sublist.",
+                            "properties": {
+                                "title": {
+                                    "type": "string",
+                                    "description": "Title description of table of contents item."
+                                },
+                                "slideIndex": {
+                                    "type": "number",
+                                    "description": "Slide index linked to this table of contents item."
+                                }
+                            },
+                            "required": ["title", "slideIndex"]
+                        },
+                        "default": []
+                    }
+                },
+                "required": ["title", "slideIndex"]
+            }
+        },
+
         "tocOrientation": {
             "type": "string",
             "description": "Specifies the orientation of the table of contents navigation menu.",
diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
index 5213c01b..070f732b 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -610,7 +610,111 @@
             ]
         }
     ],
-    "tocOrientation": "vertical",
+    "tableOfContents": [
+        {
+            "title": "Overview",
+            "slideIndex": 0,
+            "sublist": [
+                {
+                    "title": "Community Directory",
+                    "slideIndex": 1
+                },
+                {
+                    "title": "Interactive Map",
+                    "slideIndex": 2
+                },
+                {
+                    "title": "RAMP Carousel",
+                    "slideIndex": 3
+                },
+                {
+                    "title": "Dynamic Panel",
+                    "slideIndex": 4
+                },
+                {
+                    "title": "YouTube Video",
+                    "slideIndex": 5
+                },
+                {
+                    "title": "Cumulative Effects Video",
+                    "slideIndex": 6
+                }
+            ]
+        },
+        {
+            "title": "Oil Sands Deposits",
+            "slideIndex": 7
+        },
+        {
+            "title": "Oil Sands Extraction",
+            "slideIndex": 8,
+            "sublist": []
+        },
+        {
+            "title": "In-situ Extraction",
+            "slideIndex": 9
+        },
+        {
+            "title": "Where are Facilities Located?",
+            "slideIndex": 10,
+            "sublist": [
+                {
+                    "title": "NPRI Substances Reported for Oil Sands Mining Faciltiies",
+                    "slideIndex": 11
+                },
+                {
+                    "title": "NPRI Substances Reported for Oil Sands Mining Facilities (2)",
+                    "slideIndex": 12
+                },
+                {
+                    "title": "Criteria Air Contaminant Releases From Oil Sands Mines",
+                    "slideIndex": 13
+                },
+                {
+                    "title": "Reported Mine Tailings From Oil Sands Surface Mining Facilities",
+                    "slideIndex": 14
+                },
+                {
+                    "title": "Reported Mine Tailings From Oil Sands Surface Mining Facilities (2)",
+                    "slideIndex": 15
+                },
+                {
+                    "title": "Trends in Mine Tailings Reported From Surface Mining Facilities",
+                    "slideIndex": 16
+                },
+                {
+                    "title": "Thermal in Situ Facilities",
+                    "slideIndex": 17
+                },
+                {
+                    "title": "NPRI Releases From Thermal in-situ Faciltiies",
+                    "slideIndex": 18
+                }
+            ]
+        },
+        {
+            "title": "Highcharts Demo (╯°□°)╯︵ ┻━┻",
+            "slideIndex": 19,
+            "sublist": [
+                {
+                    "title": "Dynamic Slideshow with Hybrid Chart",
+                    "slideIndex": 20
+                }
+            ]
+        },
+        {
+            "title": "Managing Environmental Impacts",
+            "slideIndex": 21,
+            "sublist": [
+                {
+                    "title": "Last Slide",
+                    "slideIndex": 22
+                }
+            ]
+        }
+    ],
+    "tocOrientation": "horizontal",
+    "returnTop": false,
     "stylesheets": ["00000000-0000-0000-0000-000000000000/styles/main.css"],
     "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",
diff --git a/src/components/story/horizontal-menu.vue b/src/components/story/horizontal-menu.vue
index 75bb4d7c..56a9a9ae 100644
--- a/src/components/story/horizontal-menu.vue
+++ b/src/components/story/horizontal-menu.vue
@@ -37,58 +37,167 @@
                     }}</span>
                 </router-link>
             </li>
-            <li
-                v-for="(slide, idx) in slides"
-                :key="idx"
-                :class="{
-                    'is-active': lastActiveIdx === slide.index,
-                    separator: (!returnToTop && idx !== 0) || returnToTop
-                }"
-            >
-                <!-- 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: 'bottom',
-                        content: getTitle(slide),
-                        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"
+                    @mouseenter="showSublist(idx)"
+                    @mouseleave="hideSublist(idx)"
                 >
-                    <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                        getTitle(slide)
-                    }}</span>
-                </a>
+                    <!-- 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: `#${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}` }"
-                    class="flex items-center px-2 py-1 mx-1"
-                    target
-                    v-tippy="{
-                        delay: '200',
-                        placement: 'bottom',
-                        content: getTitle(slide),
-                        animateFill: true,
-                        animation: 'chapter-menu'
+                    <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>
+
+                    <!-- Dropdown for sublists -->
+                    <ul v-show="isSublistToggled(idx)" class="dropdown-menu">
+                        <li
+                            v-for="(subItem, subIdx) in item.sublist"
+                            :key="subIdx"
+                            :class="[
+                                {
+                                    'border-t-2': subIdx === 0,
+                                    'is-active': lastActiveIdx === subItem.slideIndex
+                                }
+                            ]"
+                            class="border-b-2 border-gray-300"
+                        >
+                            <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"
+                            >
+                                <span
+                                    class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap"
+                                    >{{ 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
+                            >
+                                <span
+                                    class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap"
+                                    >{{ 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,
+                        separator: (!returnToTop && idx !== 0) || returnToTop
                     }"
-                    v-else
                 >
-                    <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                        getTitle(slide)
-                    }}</span>
-                </router-link>
-            </li>
+                    <!-- 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: 'bottom',
+                            content: getTitle(slide),
+                            animateFill: true,
+                            animation: 'chapter-menu'
+                        }"
+                        v-if="plugin"
+                    >
+                        <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                            getTitle(slide)
+                        }}</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: 'bottom',
+                            content: getTitle(slide),
+                            animateFill: true,
+                            animation: 'chapter-menu'
+                        }"
+                        v-else
+                    >
+                        <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                            getTitle(slide)
+                        }}</span>
+                    </router-link>
+                </li>
+            </template>
         </ul>
     </div>
 </template>
 
 <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';
 
 import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
@@ -102,6 +211,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
@@ -119,6 +232,17 @@ const props = defineProps({
 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,
     () => {
@@ -129,6 +253,12 @@ 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 => {
@@ -138,12 +268,29 @@ const scrollToChapter = (id: string): void => {
     }
 };
 
-const getTitle = (slide: Slide): string => {
+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 showSublist = (index: number): void => {
+    sublistToggled.value[index] = true;
+};
+
+const hideSublist = (index: number): void => {
+    sublistToggled.value[index] = false;
+};
+
+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>
@@ -159,21 +306,23 @@ const updateActiveIdx = () => {
     display: flex;
     justify-content: center;
 }
-.navbar ul {
+
+.navbar > ul {
     display: flex;
     list-style-type: none;
     text-align: center;
     justify-content: center;
     flex-wrap: wrap;
-    overflow: hidden;
     width: 100%;
     padding: 5px;
     margin: auto;
 }
-.navbar ul li {
+
+.navbar > ul > li {
     float: left;
     width: 12%;
     border-radius: 8px;
+    position: relative;
     a {
         text-overflow: ellipsis;
     }
@@ -196,6 +345,7 @@ const updateActiveIdx = () => {
         font-weight: bold;
     }
 }
+
 .separator {
     position: relative;
 }
@@ -210,4 +360,21 @@ const updateActiveIdx = () => {
     width: 1px;
     background-color: #e0e0e0;
 }
+
+.dropdown-menu {
+    position: absolute;
+    width: 100%;
+    background-color: rgb(241, 242, 244);
+    box-sizing: border-box;
+
+    > li {
+        background-color: rgb(241, 242, 244);
+        font-weight: normal;
+
+        &.is-active {
+            background-color: var(--sr-accent-colour);
+            font-weight: bold;
+        }
+    }
+}
 </style>
diff --git a/src/components/story/story-content.vue b/src/components/story/story-content.vue
index 6c0bd1dd..f7d089dc 100644
--- a/src/components/story/story-content.vue
+++ b/src/components/story/story-content.vue
@@ -7,7 +7,8 @@
             class="top-menu"
             :active-chapter-index="activeChapterIndex"
             :return-to-top="config.returnTop ?? true"
-            :slides="tocSlides"
+            :slides="config.slides"
+            :customToc="config.tableOfContents"
             :plugin="!!configFileStructure || !!plugin"
             :lang="lang"
             :style="{ top: headerHeight + 'px' }"
@@ -17,7 +18,8 @@
             class="side-menu"
             :active-chapter-index="activeChapterIndex"
             :return-to-top="config.returnTop ?? true"
-            :slides="tocSlides"
+            :slides="config.slides"
+            :customToc:="config.tableOfContents"
             :plugin="!!configFileStructure || !!plugin"
             :lang="lang"
             v-else
@@ -58,7 +60,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { ConfigFileStructure, Slide, StoryRampConfig } from '@storylines/definitions';
 import 'intersection-observer';
@@ -92,11 +94,6 @@ const props = defineProps({
     }
 });
 
-// filter out which slides are visible in the table of contents while preserving original slide index
-const tocSlides = computed(() =>
-    props.config.slides.map((slide, idx) => ({ ...slide, index: idx })).filter((slide) => slide.includeInToc !== false)
-);
-
 const activeChapterIndex = ref(-1);
 const horizontalNavHeight = ref(0);
 const backgroundImage = ref<string>('none');
diff --git a/src/definitions.ts b/src/definitions.ts
index f1fd7a26..f19e5019 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -14,6 +14,7 @@ export interface StoryRampConfig {
     stylesheets?: string[];
     dateModified: string;
     lazyLoad: boolean;
+    tableOfContents?: MenuItem[];
 }
 
 export interface ConfigFileStructure {
@@ -31,6 +32,17 @@ export interface ConfigFileStructure {
     };
 }
 
+export interface MenuItem {
+    title: string;
+    slideIndex: number;
+    sublist?: [
+        {
+            title: string;
+            slideIndex: number;
+        }
+    ];
+}
+
 export interface DQVOptions {
     title: string;
     subtitle: string;
@@ -127,7 +139,7 @@ export interface Slide {
     // panel: [BasePanel, BasePanel | undefined];
     panel: BasePanel[];
     index: number;
-    backgroundImage: string;
+    backgroundImage: string | undefined;
     includeInToc?: boolean;
     bgCssClasses?: string;
 }

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

---
 ...000000-0000-0000-0000-000000000000_fr.json |  82 +++++++
 src/components/panels/helpers/toc-item.vue    | 138 ++++++++++++
 src/components/story/chapter-menu.vue         | 205 ++++++++++++------
 src/components/story/horizontal-menu.vue      | 177 ++++-----------
 src/components/story/mobile-menu.vue          | 197 +++++++++++------
 src/components/story/story-content.vue        |   2 +-
 src/components/story/story.vue                |   1 +
 src/lang/lang.csv                             |   1 +
 8 files changed, 530 insertions(+), 273 deletions(-)
 create mode 100644 src/components/panels/helpers/toc-item.vue

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..4226782c 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,88 @@
             ]
         }
     ],
+    "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
+        }
+    ],
     "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/panels/helpers/toc-item.vue b/src/components/panels/helpers/toc-item.vue
new file mode 100644
index 00000000..26e3522b
--- /dev/null
+++ b/src/components/panels/helpers/toc-item.vue
@@ -0,0 +1,138 @@
+<template>
+    <div :class="{ flex: parentItem }">
+        <!-- using router-link causes a page refresh which breaks plugin -->
+        <a
+            class="flex items-center px-2 py-1 mx-1 cursor-pointer"
+            :class="{ 'flex-grow pb-2 min-w-0': parentItem, 'pb-2': parentItem && !verticalToc }"
+            @click="scrollToChapter(getSlideId(tocItem.slideIndex))"
+            v-tippy="{
+                delay: '200',
+                placement: 'right',
+                content: getTitle(tocItem),
+                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"
+                v-if="verticalToc"
+            >
+                <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"
+                :class="{ 'ml-4': verticalToc && parentItem, 'pl-8': verticalToc && !parentItem }"
+                >{{ getTitle(tocItem) }}</span
+            >
+        </a>
+
+        <router-link
+            :to="{ hash: `#${getSlideId(tocItem.slideIndex)}` }"
+            class="flex items-center px-2 py-1 mx-1"
+            :class="{ 'flex-grow min-w-0': parentItem, 'pb-2': parentItem && !verticalToc }"
+            target
+            v-tippy="{
+                delay: '200',
+                placement: 'right',
+                content: getTitle(tocItem),
+                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"
+                v-if="verticalToc"
+            >
+                <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"
+                :class="{ 'ml-4': verticalToc && parentItem, 'pl-8': verticalToc && !parentItem }"
+                >{{ getTitle(tocItem) }}</span
+            >
+        </router-link>
+
+        <slot></slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { MenuItem, Slide } from '@storylines/definitions';
+
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+const props = defineProps({
+    tocItem: {
+        type: Object as PropType<MenuItem>,
+        required: true
+    },
+    slides: {
+        type: Array as PropType<Array<Slide>>,
+        required: true
+    },
+    parentItem: {
+        type: Boolean,
+        required: false,
+        default: true
+    },
+    verticalToc: {
+        type: Boolean,
+        required: false,
+        default: true
+    },
+    mobile: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+    plugin: {
+        type: Boolean,
+        required: true
+    },
+    returnTop: {
+        type: Boolean,
+        required: false,
+        default: false
+    }
+});
+
+const scrollToChapter = (id: string): void => {
+    const el = document.getElementById(id);
+    if (el) {
+        el.scrollIntoView({ behavior: 'smooth' });
+    }
+};
+
+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(' ', '-')}` : '';
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/story/chapter-menu.vue b/src/components/story/chapter-menu.vue
index b3d9f821..f9580c0c 100644
--- a/src/components/story/chapter-menu.vue
+++ b/src/components/story/chapter-menu.vue
@@ -29,10 +29,9 @@
                     <path class="transition-all duration-500 ease-in-out" :d="`m3.5 12h${isMenuOpen ? '17' : '8.5'}`" />
                     <path d="m3.5 17h17" />
                 </svg>
-                <span
-                    class="flex-1 ml-4 overflow-hidden leading-normal text-left overflow-ellipsis whitespace-nowrap"
-                    >{{ $t('chapters.title') }}</span
-                >
+                <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
+                    $t('chapters.title')
+                }}</span>
             </button>
         </div>
 
@@ -143,71 +142,77 @@
                     }}</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>
+                    <toc-item :tocItem="item" :slides="slides" :plugin="plugin">
+                        <button
+                            class="mr-1"
+                            :aria-label="$t('chapters.menu.dropdown')"
+                            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>
+                    </toc-item>
 
-                <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
+                    <!-- 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
+                            }"
+                        >
+                            <toc-item
+                                :tocItem="subItem"
+                                :slides="slides"
+                                :parentItem="false"
+                                :plugin="plugin"
+                            ></toc-item>
+                        </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"
-                    >
-                        <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>
+                    <toc-item :tocItem="{ ...slide, slideIndex: idx }" :slides="slides" :plugin="plugin"></toc-item>
+                </li>
+            </template>
             <div class="h-10 flex-shrink-0"></div>
         </ul>
     </div>
@@ -215,8 +220,9 @@
 
 <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';
+import TocItem from '@storylines/components/panels/helpers/toc-item.vue';
 
 const props = defineProps({
     returnToTop: {
@@ -227,6 +233,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 +255,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 +276,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 +290,16 @@ const scrollToChapter = (id: string): void => {
     }
 };
 
+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 +321,7 @@ const updateActiveIdx = () => {
     display: none; /* Safari and Chrome */
 }
 
-.menu li {
+.menu > li {
     a:hover {
         text-decoration: none;
         color: inherit;
@@ -307,14 +341,43 @@ const updateActiveIdx = () => {
     }
 
     &.is-active {
-        svg {
+        :deep(svg) {
             fill: var(--sr-accent-colour);
             stroke: var(--sr-accent-colour);
         }
 
-        span {
+        :deep(span) {
             font-weight: bold;
         }
     }
 }
+
+.dropdown-menu {
+    > li {
+        font-weight: normal;
+        :deep(svg) {
+            fill: #fff !important;
+            stroke: #878787 !important;
+        }
+
+        :deep(span) {
+            font-weight: normal !important;
+        }
+
+        &.is-active {
+            :deep(span) {
+                font-weight: bold !important;
+            }
+
+            :deep(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..69c5dfdb 100644
--- a/src/components/story/horizontal-menu.vue
+++ b/src/components/story/horizontal-menu.vue
@@ -46,48 +46,37 @@
                     :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>
+                    <toc-item :tocItem="item" :slides="slides" :verticalToc="false" :plugin="plugin">
+                        <button
+                            class="mr-1"
+                            :aria-label="$t('chapters.menu.dropdown')"
+                            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>
+                    </toc-item>
 
                     <!-- Dropdown for sublists -->
                     <ul v-show="isSublistToggled(idx)" class="dropdown-menu">
@@ -102,42 +91,13 @@
                             ]"
                             class="border-b-2 border-gray-300"
                         >
-                            <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"
-                            >
-                                <span
-                                    class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap"
-                                    >{{ 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
-                            >
-                                <span
-                                    class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap"
-                                    >{{ subItem.title }}</span
-                                >
-                            </router-link>
+                            <toc-item
+                                :tocItem="subItem"
+                                :slides="slides"
+                                :parentItem="false"
+                                :verticalToc="false"
+                                :plugin="plugin"
+                            ></toc-item>
                         </li>
                     </ul>
                 </li>
@@ -153,41 +113,12 @@
                         separator: (!returnToTop && idx !== 0) || returnToTop
                     }"
                 >
-                    <!-- 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: 'bottom',
-                            content: getTitle(slide),
-                            animateFill: true,
-                            animation: 'chapter-menu'
-                        }"
-                        v-if="plugin"
-                    >
-                        <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                            getTitle(slide)
-                        }}</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: 'bottom',
-                            content: getTitle(slide),
-                            animateFill: true,
-                            animation: 'chapter-menu'
-                        }"
-                        v-else
-                    >
-                        <span class="flex-1 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
-                            getTitle(slide)
-                        }}</span>
-                    </router-link>
+                    <toc-item
+                        :tocItem="{ ...slide, slideIndex: idx }"
+                        :slides="slides"
+                        :verticalToc="false"
+                        :plugin="plugin"
+                    ></toc-item>
                 </li>
             </template>
         </ul>
@@ -198,9 +129,7 @@
 import type { PropType } from 'vue';
 import { computed, ref, watch, onMounted } from 'vue';
 import { MenuItem, Slide } from '@storylines/definitions';
-
-import { useI18n } from 'vue-i18n';
-const { t } = useI18n();
+import TocItem from '@storylines/components/panels/helpers/toc-item.vue';
 
 const props = defineProps({
     returnToTop: {
@@ -268,21 +197,8 @@ 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 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 => {
@@ -340,6 +256,7 @@ const updateActiveIdx = () => {
     a:visited {
         color: inherit;
     }
+
     &.is-active {
         background-color: var(--sr-accent-colour);
         font-weight: bold;
diff --git a/src/components/story/mobile-menu.vue b/src/components/story/mobile-menu.vue
index 48f9f314..fc12d54f 100644
--- a/src/components/story/mobile-menu.vue
+++ b/src/components/story/mobile-menu.vue
@@ -37,7 +37,7 @@
 
         <ul v-show="isMenuOpen" class="dropdown-nav-content bg-white pb-10 w-72 z-10 border-r border-gray-200">
             <li v-if="introExists && returnToTop">
-                <button class="flex py-1 px-3" @click="scrollToChapter('intro')" v-if="plugin">
+                <a class="flex py-1 px-3" @click="scrollToChapter('intro')" v-if="plugin">
                     <svg
                         class="flex-shrink-0"
                         viewBox="0 0 24 24"
@@ -76,7 +76,7 @@
                     <span class="flex-1 ml-4 overflow-hidden leading-normal overflow-ellipsis whitespace-nowrap">{{
                         $t('chapters.return')
                     }}</span>
-                </button>
+                </a>
 
                 <router-link :to="{ hash: '#intro' }" class="flex py-1 px-3" target v-else>
                     <svg
@@ -119,71 +119,76 @@
                     }}</span>
                 </router-link>
             </li>
-            <li v-for="(slide, idx) in tocSlides" :key="idx" :class="{ 'is-active': lastActiveIdx === slide.index }">
-                <button
-                    class="flex py-1 px-3"
-                    @click="scrollToChapter(`${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}`)"
-                    v-tippy="{
-                        delay: '200',
-                        placement: 'top',
-                        offset: [0, 0],
-                        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>
-                </button>
-                <router-link
-                    :to="{ hash: `#${slide.index}-${slide.title.toLowerCase().replaceAll(' ', '-')}` }"
-                    class="flex py-1 px-3"
-                    target
-                    v-tippy="{
-                        delay: '200',
-                        placement: 'top',
-                        offset: [0, 0],
-                        content: slide.title,
-                        animateFill: true,
-                        animation: 'chapter-menu'
-                    }"
-                    v-else
+                    <toc-item :tocItem="item" :slides="slides" :plugin="plugin">
+                        <button
+                            class="mr-1"
+                            :aria-label="$t('chapters.menu.dropdown')"
+                            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>
+                    </toc-item>
+
+                    <!-- 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
+                            }"
+                        >
+                            <toc-item
+                                :tocItem="subItem"
+                                :slides="slides"
+                                :parentItem="false"
+                                :plugin="plugin"
+                            ></toc-item>
+                        </li>
+                    </ul>
+                </li>
+            </template>
+
+            <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"
-                    >
-                        <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>
+                    <toc-item :tocItem="{ ...slide, slideIndex: idx }" :slides="slides" :plugin="plugin"></toc-item>
+                </li>
+            </template>
         </ul>
     </div>
 </template>
@@ -191,7 +196,8 @@
 <script setup lang="ts">
 import type { PropType } from 'vue';
 import { computed, ref, watch, onMounted } from 'vue';
-import { Slide } from '@storylines/definitions';
+import { MenuItem, Slide } from '@storylines/definitions';
+import TocItem from '@storylines/components/panels/helpers/toc-item.vue';
 
 const props = defineProps({
     returnToTop: {
@@ -202,6 +208,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
@@ -219,10 +229,16 @@ const isMenuOpen = ref(false);
 const introExists = ref(true);
 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(() =>
-    props.slides.map((slide, idx) => ({ ...slide, index: idx })).filter((slide) => slide.includeInToc !== false)
-);
+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,
@@ -234,6 +250,12 @@ 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 => {
@@ -243,6 +265,14 @@ const scrollToChapter = (id: string): void => {
     }
 };
 
+const toggleSublist = (index: number): void => {
+    sublistToggled.value[index] = !sublistToggled.value[index];
+};
+
+const isSublistToggled = (index: number): boolean => {
+    return sublistToggled.value[index];
+};
+
 const updateActiveIdx = () => {
     const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
     lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
@@ -272,7 +302,7 @@ const updateActiveIdx = () => {
         color: inherit;
     }
 
-    a:hover svg {
+    a:hover :deep(svg) {
         stroke: var(--sr-accent-colour);
     }
 
@@ -281,14 +311,39 @@ const updateActiveIdx = () => {
     }
 
     &.is-active {
-        svg {
+        :deep(svg) {
             fill: var(--sr-accent-colour);
             stroke: var(--sr-accent-colour);
         }
 
-        span {
+        :deep(span) {
             font-weight: bold;
         }
     }
 }
+
+.dropdown-menu {
+    > li {
+        font-weight: normal;
+        :deep(svg) {
+            fill: #fff !important;
+            stroke: #878787 !important;
+        }
+
+        :deep(span) {
+            font-weight: normal !important;
+        }
+
+        &.is-active {
+            :deep(span) {
+                font-weight: bold !important;
+            }
+
+            :deep(svg) {
+                fill: var(--sr-accent-colour) !important;
+                stroke: var(--sr-accent-colour) !important;
+            }
+        }
+    }
+}
 </style>
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
diff --git a/src/components/story/story.vue b/src/components/story/story.vue
index 28ac0595..5cbe1d1d 100644
--- a/src/components/story/story.vue
+++ b/src/components/story/story.vue
@@ -26,6 +26,7 @@
                         class="mobile-menu"
                         :active-chapter-index="activeChapterIndex"
                         :return-to-top="config.returnTop ?? true"
+                        :customToc="config.tableOfContents"
                         :slides="config.slides"
                         :lang="lang"
                     />
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index edcdd2bc..2c70acf3 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -2,6 +2,7 @@ key,enValue,enValid,frValue,frValid
 chapters.title,Chapters,1,Chapitres,1
 chapters.return,Return to top,1,Retournez en haut,1
 chapters.menu,Toggle menu,1,Menu bascule,0
+chapters.menu.dropdown,Toggle dropdown menu,1,Basculer le menu déroulant,0
 chapters.untitled,Untitled Slide,1,Diapositive sans titre,0
 layer.loading,The layer is loading...,1,La couche est en cours de téléchargement...,1
 scrollguard.desc,Use ctrl + scroll to zoom the map,1,Utilisez les touches Ctrl et + pour faire un zoom de la carte,1

From e896c861360feae226e36cdf4cb70c9f5eba3334 Mon Sep 17 00:00:00 2001
From: Yi Lei Feng <fengyilei1@gmail.com>
Date: Fri, 3 Jan 2025 12:29:27 -0500
Subject: [PATCH 3/3] close horizontal dropdown menus on click / focus
 elsewhere

---
 ...000000-0000-0000-0000-000000000000_en.json | 29 --------
 src/components/panels/helpers/toc-item.vue    |  2 +-
 src/components/story/horizontal-menu.vue      | 68 ++++++++++++-------
 src/components/story/mobile-menu.vue          |  4 ++
 4 files changed, 48 insertions(+), 55 deletions(-)

diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
index 070f732b..d58f3022 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -13,35 +13,6 @@
         "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/bg.jpg"
     },
     "slides": [
-        {
-            "title": "Interactive Map with Zoomies",
-            "panel": [
-                {
-                    "config": "00000000-0000-0000-0000-000000000000/ramp-config/Locator_Map.json",
-                    "type": "interactive-map",
-                    "scrollguard": true,
-                    "title": "Interactive Map with Zoom to Salish Sea",
-                    "points": [
-                        {
-                            "title": "Home Extent",
-                            "text": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-                            "target": {
-                                "returnHome": true
-                            }
-                        },
-                        {
-                            "title": "Point of Interest",
-                            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
-                            "target": {
-                                "layerId": "Salish_Sea_Boundaries",
-                                "oid": 1
-                            }
-                        }
-                    ],
-                    "duration": 2000
-                }
-            ]
-        },
         {
             "title": "Overview",
             "backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
diff --git a/src/components/panels/helpers/toc-item.vue b/src/components/panels/helpers/toc-item.vue
index 26e3522b..50e6b7d8 100644
--- a/src/components/panels/helpers/toc-item.vue
+++ b/src/components/panels/helpers/toc-item.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ flex: parentItem }">
+    <div class="toc-item" :class="{ flex: parentItem }">
         <!-- using router-link causes a page refresh which breaks plugin -->
         <a
             class="flex items-center px-2 py-1 mx-1 cursor-pointer"
diff --git a/src/components/story/horizontal-menu.vue b/src/components/story/horizontal-menu.vue
index 69c5dfdb..014b0e7f 100644
--- a/src/components/story/horizontal-menu.vue
+++ b/src/components/story/horizontal-menu.vue
@@ -46,6 +46,8 @@
                     :class="{
                         'is-active': lastActiveIdx === item.slideIndex
                     }"
+                    ref="itemContainer"
+                    @focusout="handleFocus(idx)"
                 >
                     <toc-item :tocItem="item" :slides="slides" :verticalToc="false" :plugin="plugin">
                         <button
@@ -60,18 +62,7 @@
                                 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
+                                :class="{ 'rotate-180': sublistToggled === idx }"
                             >
                                 <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
                             </svg>
@@ -79,7 +70,7 @@
                     </toc-item>
 
                     <!-- Dropdown for sublists -->
-                    <ul v-show="isSublistToggled(idx)" class="dropdown-menu">
+                    <ul v-show="sublistToggled === idx" class="dropdown-menu">
                         <li
                             v-for="(subItem, subIdx) in item.sublist"
                             :key="subIdx"
@@ -127,7 +118,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { computed, ref, watch, onMounted } from 'vue';
+import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { MenuItem, Slide } from '@storylines/definitions';
 import TocItem from '@storylines/components/panels/helpers/toc-item.vue';
 
@@ -161,7 +152,8 @@ const props = defineProps({
 const introExists = ref(false);
 const lastActiveIdx = ref(-1);
 
-const sublistToggled = ref({} as Record<number, boolean>);
+const sublistToggled = ref<number>(-1);
+const itemContainer = ref(null);
 
 // filter out which slides are visible in the table of contents while preserving original slide index
 const tocSlides = computed(() => {
@@ -183,13 +175,30 @@ onMounted(() => {
     const introSection = document.getElementById('intro');
     introExists.value = !!introSection;
 
-    if (props.customToc) {
-        props.customToc.forEach((item, idx) => {
-            sublistToggled.value[idx] = false;
-        });
-    }
+    document.addEventListener('click', handleMouseClick);
 });
 
+onBeforeUnmount(() => {
+    document.removeEventListener('click', handleMouseClick);
+});
+
+const hideSublists = (): void => {
+    sublistToggled.value = -1;
+};
+
+const handleMouseClick = (event: MouseEvent): void => {
+    const target = event.target as HTMLElement;
+    const tocItem = target.closest('.toc-item');
+    const sublistItem = target.closest('.dropdown-menu');
+
+    // ignore if clicking on sublist toggle button, its svg icon or any sublist item in dropdown
+    if ((tocItem && tocItem.querySelector('button')?.contains(target)) || sublistItem) {
+        return;
+    } else {
+        hideSublists();
+    }
+};
+
 const scrollToChapter = (id: string): void => {
     const el = document.getElementById(id);
     if (el) {
@@ -198,17 +207,22 @@ const scrollToChapter = (id: string): void => {
 };
 
 const toggleSublist = (index: number): void => {
-    sublistToggled.value[index] = !sublistToggled.value[index];
-};
-
-const isSublistToggled = (index: number): boolean => {
-    return sublistToggled.value[index];
+    sublistToggled.value = sublistToggled.value !== index ? index : -1;
 };
 
 const updateActiveIdx = () => {
     const prevSlides = tocSlides.value.filter((slide) => slide.index <= props.activeChapterIndex);
     lastActiveIdx.value = prevSlides.length ? prevSlides[prevSlides.length - 1].index : -1;
 };
+
+const handleFocus = (idx: number) => {
+    setTimeout(() => {
+        const tocItems = itemContainer.value;
+        if (tocItems && tocItems[idx] && !(tocItems[idx] as HTMLElement).contains(document.activeElement)) {
+            sublistToggled.value = -1;
+        }
+    }, 0);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -294,4 +308,8 @@ const updateActiveIdx = () => {
         }
     }
 }
+
+.rotate-180 {
+    transform: rotate(-180deg);
+}
 </style>
diff --git a/src/components/story/mobile-menu.vue b/src/components/story/mobile-menu.vue
index fc12d54f..2355111c 100644
--- a/src/components/story/mobile-menu.vue
+++ b/src/components/story/mobile-menu.vue
@@ -346,4 +346,8 @@ const updateActiveIdx = () => {
         }
     }
 }
+
+.rotate-180 {
+    transform: rotate(-180deg);
+}
 </style>