[feat](docs): collapse docs

Author: BeeMargarida

apps/docs/src/lib/components/Sidebar.svelte

@@ -202,6 +202,7 @@
 					<strong><BoxModel /><Space w="md" />Miscellaneous</strong>
 					<ul>
 						<li><a href={`${base}/core/box`}>Box</a></li>
+						<li><a href={`${base}/core/collapse`}>Collapse</a></li>
 						<li><a href={`${base}/core/divider`}>Divider</a></li>
 						<li><a href={`${base}/core/observer-render`}>ObserverRender</a></li>
 						<li><a href={`${base}/core/paper`}>Paper</a></li>

apps/docs/src/lib/components/TopBar/data.ts

@@ -50,6 +50,7 @@ export const searchLinks = [
 	{ title: 'Checkbox', link: `${base}/core/checkbox`, section: 'Components' },
 	{ title: 'Chip', link: `${base}/core/chip`, section: 'Components' },
 	{ title: 'Code', link: `${base}/core/code`, section: 'Components' },
+	{ title: 'Collapse', link: `${base}/core/collapse`, section: 'Components' },
 	{ title: 'Container', link: `${base}/core/container`, section: 'Components' },
 	{ title: 'Divider', link: `${base}/core/divider`, section: 'Components' },
 	{ title: 'Grid', link: `${base}/core/grid`, section: 'Components' },

apps/docs/src/lib/data/main/homepage.js

@@ -3,6 +3,7 @@ import TypeScript from '../../components/svgs/TypeScript.svelte';
 import {
 	Container,
 	Center,
+	Collapse,
 	SimpleGrid,
 	Stack,
 	Group,
@@ -248,5 +249,13 @@ export const components = [
 		title: 'Box',
 		color: '$blue600',
 		content: 'Read about me'
+	},
+	{
+		icon: BoxIcon,
+		component: Collapse,
+		link: 'core/collapse',
+		title: 'Collapse',
+		color: '$blue600',
+		content: 'Read about me'
 	}
 ];

apps/docs/src/routes/core/collapse/+page.md

@@ -0,0 +1,38 @@
+---
+title: Collapse
+group: 'svelteuidev-core'
+packageGroup: '@svelteuidev/core'
+slug: /core/collapse/
+category: 'misc'
+description: 'Hides and shows content with a slide animation'
+importCode: "import { Collapse } from '@svelteuidev/core';"
+source: 'svelteui-core/src/components/Collapse/Collapse.svelte'
+docs: 'core/collapse'
+---
+
+<script>
+  import { Demo, CollapseDemos } from '@svelteuidev/demos';
+  import { Heading } from "$lib/components";
+  import { base } from '$app/paths';
+</script>
+
+<svelte:head>
+
+  <title>{title} - SvelteUI</title>
+</svelte:head>
+
+<Heading {title} {group} {packageGroup} {slug} {category} {description} {importCode} {source} {docs} />
+
+## Usage
+
+<Demo demo={CollapseDemos.usage} />
+
+## Transition duration
+
+It's possible to control the transition duration with the prop `transitionDuration` (in milliseconds). It's also possible to disable the opacity animation with the prop `animateOpacity`
+
+<Demo demo={CollapseDemos.transition} />
+
+## Nested collapse
+
+<Demo demo={CollapseDemos.nested} />