src/lib/components/channel/Channel.svelte

<script lang="ts">
	import { Menu } from '@lucide/svelte';
	import { X } from '@lucide/svelte';

	import { Button } from '$lib/components/ui/button';
	import * as Sheet from '$lib/components/ui/sheet';
</script>

<div class="">
	<Sheet.Root>
		<Sheet.Trigger asChild>
			<Button variant="outline" size="icon">
				<Menu />
			</Button>
		</Sheet.Trigger>
		<Sheet.Content side="left">
			<Sheet.Header>
				<Sheet.Title>Channel</Sheet.Title>
			</Sheet.Header>
			<Sheet.Footer>
				<Sheet.Close asChild>
					<Button variant="outline" size="icon">
						<X />
					</Button>
				</Sheet.Close>
			</Sheet.Footer>
		</Sheet.Content>
	</Sheet.Root>
</div>