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

   let visible = false;

	function closeDropdown() {
		console.log('do something');
		visible = false;
	}

	function toggleDropdown() {
		visible = !visible;
	}
</script>

<Dropdown bind:visible={visible1}>
	<Button slot="trigger" type="primary" on:click={toggleDropdown1}>Toggle Dropdown</Button>
	<Dropdown.Items slot="items" placement="bottom" alignment="start">
		<Dropdown.Items.Item on:click={closeDropdown1} label="Item 1">
			<Dropdown.Items.Item.Icon slot="icon" data={trash} />
		</Dropdown.Items.Item>
		<Dropdown.Items.Item on:click={closeDropdown1} label="Item 2">
			<Dropdown.Items.Item.Icon slot="extra" data={trash} />
		</Dropdown.Items.Item>
		<Dropdown.Items.Item on:click={closeDropdown1} label="Notifications">
			<Badge type="info" slot="extra">+99</Badge>
		</Dropdown.Items.Item>
		<Dropdown.Items.Divider />
		<Button type="danger" class="w-full justify-between">
			<Button.Leading slot="leading" data={home} />
			Home
			<Button.Trailing slot="trailing" data={home} />
		</Button>
	</Dropdown.Items>
</Dropdown>