Change stringify implementation

Author: Joshua-Lester3

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -283,19 +283,19 @@
                          'toc-content' : item.level==0,
                          'nested' : item.level>
                     0,
-                    'current-section': currentPage.some(p => JSON.stringify(p.keys) == JSON.stringify(item.keys)),
+                    'current-section': currentPage.some(p => firstOrDefault(p.keys) == firstOrDefault(item.keys)),
                     }" :href="item.href">{{item.title}}
                 </summary>
                 <ul>
                     <li :class="{
                         ['indent-level-' + (item.level+1)]: true,
                         'current-li' : currentPage.some(p=>
-                        JSON.stringify(p.keys) == JSON.stringify(item.keys)) && !currentPage.some(p => p.level > item.level),
+                        firstOrDefault(p.keys) == firstOrDefault(item.keys)) && !currentPage.some(p => p.level > item.level),
                         }" >
                         <a class="section-link" :class="{
                            ['indent-level-' + (item.level+1)]: true,
                            'current-section' : currentPage.some(p=>
-                            JSON.stringify(p.keys) == JSON.stringify(item.keys)) && !currentPage.some(p => p.level > item.level),
+                            firstOrDefault(p.keys) == firstOrDefault(item.keys)) && !currentPage.some(p => p.level > item.level),
                             }" :href="item.href"> Introduction
                         </a>
                     </li>
@@ -307,12 +307,12 @@
         <li v-else :class="{
             ['indent-level-' + (item.level+1)]: true,
             'current-li' : currentPage.some(p=>
-            JSON.stringify(p.keys) == JSON.stringify(item.keys)) && !currentPage.some(p => p.level > item.level),
+            firstOrDefault(p.keys) == firstOrDefault(item.keys)) && !currentPage.some(p => p.level > item.level),
             }" >
             <a class="section-link" :class="{
                ['indent-level-' + (item.level)]: true,
                'current-section' : currentPage.some(p=>
-                JSON.stringify(p.keys) == JSON.stringify(item.keys)),
+                firstOrDefault(p.keys) == firstOrDefault(item.keys)),
                 }" :href="item.href"> {{item.title}}
             </a>
         </li>

EssentialCSharp.Web/wwwroot/js/site.js

@@ -187,6 +187,13 @@ const app = createApp({
 
         const sidebarShown = ref(false);
 
+        function firstOrDefault(list) {
+            if (list.length > 0) {
+                return list[0];
+            }
+            return null;
+        }
+
         const smallScreen = computed(() => {
             return (windowWidth.value || 0) < smallScreenSize;
         });