refac: playground

src/lib/components/common/Collapsible.svelte

@@ -15,6 +15,8 @@
 	export let buttonClassName = 'w-fit';
 	export let title = null;
 
+	export let grow = false;
+
 	export let disabled = false;
 	export let hide = false;
 </script>
@@ -60,13 +62,28 @@
 		>
 			<div>
 				<slot />
+
+				{#if grow}
+					{#if open && !hide}
+						<div
+							transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}
+							on:pointerup={(e) => {
+								e.stopPropagation();
+							}}
+						>
+							<slot name="content" />
+						</div>
+					{/if}
+				{/if}
 			</div>
 		</div>
 	{/if}
 
-	{#if open && !hide}
-		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
-			<slot name="content" />
-		</div>
+	{#if !grow}
+		{#if open && !hide}
+			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
+				<slot name="content" />
+			</div>
+		{/if}
 	{/if}
 </div>

src/lib/components/common/Sidebar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { quadInOut, quintIn } from 'svelte/easing';
+	import { fade, slide } from 'svelte/transition';
+
+	export let show = false;
+	export let side = 'right';
+	export let width = '200px';
+
+	export let className = '';
+</script>
+
+{#if show}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="absolute z-20 top-0 right-0 left-0 bottom-0 bg-black/10 w-full min-h-full h-full flex justify-center overflow-hidden overscroll-contain"
+		on:mousedown={() => {
+			show = false;
+		}}
+		transition:fade
+	/>
+
+	<div
+		class="absolute z-30 shadow-xl {side === 'right' ? 'right-0' : 'left-0'} top-0 bottom-0"
+		transition:slide={{ easing: quadInOut, axis: side === 'right' ? 'x' : 'y' }}
+	>
+		<div class="{className} h-full" style="width: {show ? width : '0px'}">
+			<slot />
+		</div>
+	</div>
+{/if}