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 @@
type TocEntry type TocEntry
} from '$lib/components/publications/table_of_contents.svelte'; } from '$lib/components/publications/table_of_contents.svelte';
import { getContext } from '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'; import Self from './TableOfContents.svelte';
export type TocDisplayMode = 'accordion' | 'sidebar';
let { let {
displayMode = 'accordion',
depth, depth,
onSectionFocused, onSectionFocused,
} = $props<{ } = $props<{
displayMode?: TocDisplayMode;
rootAddress: string; rootAddress: string;
depth: number; depth: number;
onSectionFocused?: (address: string) => void; onSectionFocused?: (address: string) => void;
@ -46,33 +42,6 @@
} }
</script> </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: Figure out how to style indentations. -->
<!-- TODO: Make group title fonts the same as entry title fonts. --> <!-- TODO: Make group title fonts the same as entry title fonts. -->
<SidebarGroup> <SidebarGroup>
@ -98,7 +67,6 @@
} }
> >
<Self <Self
displayMode={displayMode}
rootAddress={address} rootAddress={address}
depth={childDepth} depth={childDepth}
onSectionFocused={onSectionFocused} onSectionFocused={onSectionFocused}
@ -107,4 +75,3 @@
{/if} {/if}
{/each} {/each}
</SidebarGroup> </SidebarGroup>
{/if}

Loading…
Cancel
Save