Add helper method + more key => keys fixes

Author: Joshua-Lester3

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -200,7 +200,7 @@
 
                             <div v-cloak v-if="sidebarTab == 'toc'" class="toc-tree" id="toc">
                                 <ul class="tree">
-                                    <toc-tree v-for="item in filteredTocData" :item="item" :expanded-tocs="expandedTocs" :current-page="currentPage"></toc-tree>
+                                    <toc-tree v-for="item in filteredTocData" :item="item" :expanded-tocs="expandedTocs" :current-page="currentPage" :first-or-default="firstOrDefault"></toc-tree>
                                 </ul>
                             </div>
                             <div v-cloak>
@@ -278,7 +278,7 @@
     <template id="toc-tree">
         <li v-if="item.items.length">
             <details :open="expandedTocs.has(item.keys)"
-                     v-on:toggle="!$event.target.open ? expandedTocs.delete(item.key) : expandedTocs.add(item.key)">
+                     v-on:toggle="!$event.target.open ? expandedTocs.delete(item.keys) : expandedTocs.add(item.keys)">
                 <summary :class="{
                          'toc-content' : item.level==0,
                          'nested' : item.level>
@@ -299,7 +299,7 @@
                             }" :href="item.href"> Introduction
                         </a>
                     </li>
-                    <toc-tree v-for="childItem in item.items" :item="childItem" :expanded-tocs="expandedTocs" :current-page="currentPage"></toc-tree>
+                    <toc-tree v-for="childItem in item.items" :item="childItem" :expanded-tocs="expandedTocs" :current-page="currentPage" :first-or-default="firstOrDefault"></toc-tree>
                 </ul>
                 <hr class="divider" v-if="item.level === 0" />
             </details>

EssentialCSharp.Web/wwwroot/js/site.js

@@ -12,7 +12,7 @@ import { useWindowSize } from "vue-window-size";
 /**
  * @typedef {Object} TocItem
  * @prop {number} [level]
- * @prop {string} [key]
+ * @prop {string[]} [keys]
  * @prop {string} [href]
  * @prop {string} [title]
  * @prop {TocItem[]} [items]
@@ -84,7 +84,7 @@ function findCurrentPage(path, items) {
             return itemPath;
         }
         for (let key of item.keys) {
-            if (window.location.href.endsWith("/" + item.key)) {
+            if (window.location.href.endsWith("/" + key)) {
                 return itemPath;
             }
         }
@@ -187,11 +187,16 @@ const app = createApp({
 
         const sidebarShown = ref(false);
 
+        /**
+        * Find the first element of a list, otherwise null
+        * @param {string[]} list
+        * @returns {string | undefined} first element or null
+        * */
         function firstOrDefault(list) {
             if (list.length > 0) {
                 return list[0];
             }
-            return null;
+            return undefined;
         }
 
         const smallScreen = computed(() => {
@@ -313,6 +318,7 @@ const app = createApp({
 
             sidebarShown,
             sidebarTab,
+            firstOrDefault,
 
             smallScreen,
 
@@ -330,7 +336,7 @@ const app = createApp({
 });
 
 app.component("toc-tree", {
-    props: ["item", "expandedTocs", "currentPage"],
+    props: ["item", "expandedTocs", "currentPage", "firstOrDefault"],
     template: "#toc-tree",
 });