clqms-shadcn-v1/src/lib/components/nav-dictionary.svelte

<script>
	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
	import * as Collapsible from "$lib/components/ui/collapsible/index.js";
	import * as Popover from "$lib/components/ui/popover/index.js";
	import { useSidebar } from "$lib/components/ui/sidebar/index.js";
	import { Separator } from "$lib/components/ui/separator/index.js";
	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
	import { page } from "$app/stores";

	let {
		dictionary,
	} = $props();

	const sidebar = Sidebar.useSidebar();
	let openPopovers = $state({});
</script>

<Sidebar.Group>
	<Sidebar.GroupLabel>Dictionary</Sidebar.GroupLabel>
	<Sidebar.Menu>
		{#each dictionary as item, index}
			{#if sidebar.state === "expanded"}
				<Collapsible.Root open={item.isActive} class="group/collapsible">
					{#snippet child({ props })}
						<Sidebar.MenuItem {...props}>
							<Sidebar.MenuButton tooltipContent={item.title}>
								{#snippet child({ props })}
									{#if item.submenus?.length}
									<a {...props}>
										<item.icon />
										<span>{item.title}</span>
									</a>
									{:else}
									<a href={item.url} {...props}>
										<item.icon />
										<span>{item.title}</span>
									</a>
									{/if}
								{/snippet}
							</Sidebar.MenuButton>
							{#if item.submenus?.length}
								<Collapsible.Trigger>
									{#snippet child({ props })}
										<Sidebar.MenuAction
											{...props}
											class="data-[state=open]:rotate-90"
										>
											<ChevronRightIcon />
											<span class="sr-only">Toggle</span>
										</Sidebar.MenuAction>
									{/snippet}
								</Collapsible.Trigger>
								<Collapsible.Content>
									<Sidebar.MenuSub>
										{#each item.submenus as subItem (subItem.title)}
											<Sidebar.MenuSubItem>
												<Sidebar.MenuSubButton href={`${item.url}${subItem.url}`}>
													<span>{subItem.title}</span>
												</Sidebar.MenuSubButton>
											</Sidebar.MenuSubItem>
										{/each}
									</Sidebar.MenuSub>
								</Collapsible.Content>
							{/if}
						</Sidebar.MenuItem>
					{/snippet}
				</Collapsible.Root>
			{:else}
				<Popover.Root open={openPopovers[index]} onOpenChange={(open) => openPopovers[index] = open}>
					<Sidebar.MenuItem>
						{#snippet trigger(props)}
							<Popover.Trigger {...props}>
								<Sidebar.MenuButton tooltip={item.title}>
									{#if item.icon && !item.submenu}
										<item.icon />
									{/if}
									<span>{item.title}</span>
								</Sidebar.MenuButton>
							</Popover.Trigger>
						{/snippet}
						{@render trigger()}
					</Sidebar.MenuItem>
					
					<Popover.Content side="right" align="start" class="w-max p-1">
						<div class="space-y-1">
							{#if item.submenus && item.submenus.length > 0}
								<div class="px-2 py-1.5 text-sm font-semibold">
									{item.title}
								</div>
								<Separator />
								{#each item.submenus || [] as submenu}
									<a href={`${item.url}${submenu.url}`}
										onclick={() => openPopovers[index] = false}
										class="flex items-center rounded-md px-2 py-1.5 text-sm hover:bg-accent"
										class:bg-accent={$page.url.pathname === submenu.url}
									>
										{submenu.title}
									</a>
								{/each}
							{:else}
								<a href={item.url}
									onclick={() => openPopovers[index] = false}
									class="flex items-center rounded-md px-2 py-1.5 text-sm font-semibold hover:bg-accent"
									class:bg-accent={$page.url.pathname === item.url}
								>
									{item.title}
								</a>
							{/if}
						</div>
					</Popover.Content>
				</Popover.Root>
			{/if}
		{/each}
	</Sidebar.Menu>
</Sidebar.Group>