Collapsible Panes - Pane Forge

One

Two

Three

Anatomy

Here's a high-level structure of the example above:

	<script lang="ts">
	import { PaneGroup, Pane, PaneResizer, type PaneAPI } from "paneforge";
 
	let paneOneApi: PaneAPI;
	let collapsed = false;
</script>
 
{#if collapsed}
	<button
		on:click={() => {
			paneOneApi?.expand();
		}}
	>
		Expand Pane One
	</button>
{:else}
	<button
		on:click={() => {
			paneOneApi?.collapse();
		}}
	>
		Collapse Pane One
	</button>
{/if}
<PaneGroup direction="horizontal">
	<Pane
		defaultSize={50}
		collapsedSize={5}
		collapsible={true}
		minSize={15}
		bind:api={paneOneApi}
		onCollapse={() => (collapsed = true)}
		onExpand={() => (collapsed = false)}
	/>
	<PaneResizer />
	<Pane defaultSize={50}>
		<PaneGroup direction="vertical">
			<Pane defaultSize={50} />
			<PaneResizer />
			<Pane defaultSize={50} />
		</PaneGroup>
	</Pane>
</PaneGroup>