Sidebar

1<script lang="ts">
2	import CalendarIcon from '@lucide/svelte/icons/calendar';
3	import HouseIcon from '@lucide/svelte/icons/house';
4	import InboxIcon from '@lucide/svelte/icons/inbox';
5	import SearchIcon from '@lucide/svelte/icons/search';
6	import SettingsIcon from '@lucide/svelte/icons/settings';
7	import * as Sidebar from './index.js';
8
9	const items = [
10		{ title: 'Home', url: '#/', icon: HouseIcon },
11		{ title: 'Inbox', url: '#/', icon: InboxIcon },
12		{ title: 'Calendar', url: '#/', icon: CalendarIcon },
13		{ title: 'Search', url: '#/', icon: SearchIcon },
14		{ title: 'Settings', url: '#/', icon: SettingsIcon }
15	];
16</script>
17
18<div class="w-full max-w-4xl">
19	<Sidebar.Provider class="min-h-[360px] overflow-hidden rounded-lg border">
20		<Sidebar.Root>
21			<Sidebar.Header>
22				<span class="px-2 text-sm font-semibold">Acme Inc</span>
23			</Sidebar.Header>
24			<Sidebar.Content>
25				<Sidebar.Group>
26					<Sidebar.GroupLabel>Application</Sidebar.GroupLabel>
27					<Sidebar.GroupContent>
28						<Sidebar.Menu>
29							{#each items as item (item.title)}
30								<Sidebar.MenuItem>
31									<Sidebar.MenuButton tooltipContent={item.title}>
32										{#snippet child({ props })}
33											<a href={item.url} {...props}>
34												<item.icon />
35												<span>{item.title}</span>
36											</a>
37										{/snippet}
38									</Sidebar.MenuButton>
39								</Sidebar.MenuItem>
40							{/each}
41						</Sidebar.Menu>
42					</Sidebar.GroupContent>
43				</Sidebar.Group>
44			</Sidebar.Content>
45			<Sidebar.Footer>
46				<span class="px-2 text-xs text-muted-foreground">v1.0.0</span>
47			</Sidebar.Footer>
48		</Sidebar.Root>
49		<Sidebar.Inset>
50			<header class="flex h-12 items-center gap-2 border-b px-4">
51				<Sidebar.Trigger />
52				<span class="text-sm font-medium">Dashboard</span>
53			</header>
54			<div class="p-4 text-sm text-muted-foreground">Main content area</div>
55		</Sidebar.Inset>
56	</Sidebar.Provider>
57</div>
58