Remove accordion display mode from ToC component

src/lib/components/publications/TableOfContents.svelte

@@ -4,17 +4,13 @@
     type TocEntry 
   } from '$lib/components/publications/table_of_contents.svelte';
   import { getContext } from 'svelte';
-  import { Accordion, AccordionItem, SidebarDropdownWrapper, SidebarGroup, SidebarItem } from 'flowbite-svelte';
+  import { SidebarDropdownWrapper, SidebarGroup, SidebarItem } from 'flowbite-svelte';
   import Self from './TableOfContents.svelte';
 
-  export type TocDisplayMode = 'accordion' | 'sidebar';
-
   let {
-    displayMode = 'accordion',
     depth,
     onSectionFocused,
   } = $props<{
-    displayMode?: TocDisplayMode;
     rootAddress: string;
     depth: number;
     onSectionFocused?: (address: string) => void;
@@ -46,65 +42,36 @@
   }
 </script>
 
-<!-- Michael J - 16 June 2025 - Accordion mode is untested. -->
+<!-- TODO: Figure out how to style indentations. -->
-{#if displayMode === 'accordion'}
+<!-- TODO: Make group title fonts the same as entry title fonts. -->
-  <Accordion multiple>
+<SidebarGroup>
-    {#each entries as entry}
+  {#each entries as entry}
-      {@const address = entry.address}
+    {@const address = entry.address}
-      {@const expanded = toc.expandedMap.get(address) ?? false}
+    {@const expanded = toc.expandedMap.get(address) ?? false}
-      <AccordionItem 
+    {@const isLeaf = toc.leaves.has(address)}
-        bind:open={
+    {#if isLeaf}
+      <SidebarItem
+        label={entry.title}
+        href={`#${address}`}
+        spanClass='px-2 text-ellipsis'
+        onclick={() => onSectionFocused?.(address)}
+      />
+    {:else}
+      {@const childDepth = depth + 1}
+      <SidebarDropdownWrapper
+        label={entry.title}
+        btnClass='flex items-center p-2 w-full font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-primary-50 dark:text-white dark:hover:bg-primary-800'
+        bind:isOpen={
           () => expanded,
           (open) => setEntryExpanded(address, open)
         }
       >
-        {#snippet header()}
+        <Self
-          <span class="text-gray-800 dark:text-gray-300">{entry.title}</span>
+          rootAddress={address}
-        {/snippet}
+          depth={childDepth}
-        {#if entry.children.length > 0}
+          onSectionFocused={onSectionFocused}
-          <Self
-            displayMode={displayMode}
-            rootAddress={entry.address}
-            depth={depth + 1}
-            onSectionFocused={onSectionFocused}
-          />
-        {/if}
-      </AccordionItem>
-    {/each}
-  </Accordion>
-{:else}
-  <!-- TODO: Figure out how to style indentations. -->
-  <!-- TODO: Make group title fonts the same as entry title fonts. -->
-  <SidebarGroup>
-    {#each entries as entry}
-      {@const address = entry.address}
-      {@const expanded = toc.expandedMap.get(address) ?? false}
-      {@const isLeaf = toc.leaves.has(address)}
-      {#if isLeaf}
-        <SidebarItem
-          label={entry.title}
-          href={`#${address}`}
-          spanClass='px-2 text-ellipsis'
-          onclick={() => onSectionFocused?.(address)}
         />
-      {:else}
+      </SidebarDropdownWrapper>
-        {@const childDepth = depth + 1}
+    {/if}
-        <SidebarDropdownWrapper
+  {/each}
-          label={entry.title}
+</SidebarGroup>
-          btnClass='flex items-center p-2 w-full font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-primary-50 dark:text-white dark:hover:bg-primary-800'
-          bind:isOpen={
-            () => expanded,
-            (open) => setEntryExpanded(address, open)
-          }
-        >
-          <Self
-            displayMode={displayMode}
-            rootAddress={address}
-            depth={childDepth}
-            onSectionFocused={onSectionFocused}
-          />
-        </SidebarDropdownWrapper>
-      {/if}
-    {/each}
-  </SidebarGroup>
-{/if}