Browse Source

Remove accordion display mode from ToC component

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

93
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;
} = $props<{
rootAddress: string;
depth: number;
onSectionFocused?: (address: string) => void;
@ -46,65 +42,36 @@ @@ -46,65 +42,36 @@
}
</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={
<!-- 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}
{@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()}
<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>
{#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)}
<Self
rootAddress={address}
depth={childDepth}
onSectionFocused={onSectionFocused}
/>
{: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)
}
>
<Self
displayMode={displayMode}
rootAddress={address}
depth={childDepth}
onSectionFocused={onSectionFocused}
/>
</SidebarDropdownWrapper>
{/if}
{/each}
</SidebarGroup>
{/if}
</SidebarDropdownWrapper>
{/if}
{/each}
</SidebarGroup>

Loading…
Cancel
Save