Browse Source

Remove accordion display mode from ToC component

master
buttercat1791 8 months ago
parent
commit
43d77d0f04
  1. 35
      src/lib/components/publications/TableOfContents.svelte

35
src/lib/components/publications/TableOfContents.svelte

@ -4,17 +4,13 @@ @@ -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,33 +42,6 @@ @@ -46,33 +42,6 @@
}
</script>
<!-- Michael J - 16 June 2025 - Accordion mode is untested. -->
{#if displayMode === 'accordion'}
<Accordion multiple>
{#each entries as entry}
{@const address = entry.address}
{@const expanded = toc.expandedMap.get(address) ?? false}
<AccordionItem
bind:open={
() => expanded,
(open) => setEntryExpanded(address, open)
}
>
{#snippet header()}
<span class="text-gray-800 dark:text-gray-300">{entry.title}</span>
{/snippet}
{#if entry.children.length > 0}
<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>
@ -98,7 +67,6 @@ @@ -98,7 +67,6 @@
}
>
<Self
displayMode={displayMode}
rootAddress={address}
depth={childDepth}
onSectionFocused={onSectionFocused}
@ -107,4 +75,3 @@ @@ -107,4 +75,3 @@
{/if}
{/each}
</SidebarGroup>
{/if}

Loading…
Cancel
Save