<script lang="ts">
	import { Button, Portal, Drawer } from 'stwui';

   let open = false;

   function openDrawer() {
		open = true;
	}

   function closeDrawer() {
		open = false;
	}
</script>

<Button type="primary" on:click={openDrawer}>Open</Button>

<Portal>
	{#if open}
		<Drawer handleClose={closeDrawer}>
			<Drawer.Content slot="content">I am a Drawer</Drawer.Content>
		</Drawer>
	{/if}
</Portal>

<script lang="ts">
	import { Button, Portal, Drawer } from 'stwui';

	let drawerRightOpen = false;
	let drawerLeftOpen = false;
	let drawerTopOpen = false;
	let drawerBottomOpen = false;

   function openDrawerRight() {
		drawerRightOpen = true;
	}

	function closeDrawerRight() {
		drawerRightOpen = false;
	}

   function openDrawerLeft() {
		drawerLeftOpen = true;
	}

	function closeDrawerLeft() {
		drawerLeftOpen = false;
	}

	function openDrawerTop() {
		drawerTopOpen = true;
	}

	function closeDrawerTop() {
		drawerTopOpen = false;
	}

	function openDrawerBottom() {
		drawerBottomOpen = true;
	}

	function closeDrawerBottom() {
		drawerBottomOpen = false;
	}
</script>

<Button type="primary" on:click={openDrawerRight}>Open Right</Button>

<Button type="primary" on:click={openDrawerLeft}>Open Left</Button>

<Button type="primary" on:click={openDrawerTop}>Open Top</Button>

<Button type="primary" on:click={openDrawerBottom}>Open Bottom</Button>

<Portal>
	{#if drawerRightOpen}
		<Drawer handleClose={closeDrawerRight} placement="right" />
	{/if}
</Portal>

<Portal>
	{#if drawerLeftOpen}
		<Drawer handleClose={closeDrawerLeft} placement="left" />
	{/if}
</Portal>

<Portal>
	{#if drawerTopOpen}
		<Drawer handleClose={closeDrawerTop} placement="top" />
	{/if}
</Portal>

<Portal>
	{#if drawerBottomOpen}
		<Drawer handleClose={closeDrawerBottom} placement="bottom" />
	{/if}
</Portal>

<script lang="ts">
	import { Button, Portal, Drawer } from 'stwui';

   let open = false;

   function openDrawer() {
		open = true;
	}

   function closeDrawer() {
		open = false;
	}
</script>

<Button type="primary" on:click={openDrawer}>Open</Button>

<Portal>
	{#if open}
		<Drawer handleClose={closeDrawer}>
			<Drawer.Header slot="header">Drawer Header</Drawer.Header>
			<Drawer.Content slot="content">Drawer Content</Drawer.Content>
			<Drawer.Footer slot="footer">Drawer Footer</Drawer.Footer>
		</Drawer>
	{/if}
</Portal>

<script lang="ts">
	import { Button, Portal, Drawer } from 'stwui';

   let open = false;
	let drawerInsideOpen = false;

	function openDrawer() {
		drawerMultiOne = true;
	}

	function closeDrawer() {
		drawerMultiOne = false;
	}

	function openInsideDrawer() {
		drawerInsideOpen = true;
	}

	function closeInsideDrawer() {
		drawerInsideOpen = false;
	}
</script>

<Button type="primary" on:click={openDrawer}>Open</Button>

<Portal>
	{#if open}
		<Drawer handleClose={closeDrawer}>
			<Drawer.Header slot="header">Drawer Header</Drawer.Header>
			<Drawer.Content slot="content"
				>Drawer Content
				<Button type="primary" on:click={openInsideDrawer}>Open Drawer</Button>
			</Drawer.Content>
			<Drawer.Footer slot="footer">Drawer Footer</Drawer.Footer>

			<Portal>
				{#if drawerInsideOpen}
					<Drawer handleClose={closeInsideDrawer}>Content</Drawer>
				{/if}
			</Portal>
		</Drawer>
	{/if}
</Portal>