Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import { url as expandedIcon } from "$icons/expand_more";
import { url as collapsedIcon } from "$icons/navigate_next";
import "./SideNav.scss";
import Icon from "$lib/components/Icon";
import Link from "$lib/components/Link";
import type { SideNavItem } from "./types";
export let currentPath: string | null,
title: string,
link: string,
children: SideNavItem[] | undefined = undefined;
$: partOfCurrentPath = !!currentPath?.startsWith(link);
</script>
<li class="usa-sidenav__item ldaf-sidenav-item">
<Link class={partOfCurrentPath ? "usa-current" : ""} href={link}>
<span class="ldaf-sidenav-link-text">{title}</span>
{#if children && children.length > 0}
<div class="ldaf-sidenav-icon-container">
{#if partOfCurrentPath}
<Icon src={expandedIcon} size={3} />
{:else}
<Icon src={collapsedIcon} size={3} />
{/if}
</div>
{/if}
</Link>
{#if partOfCurrentPath && children && children.length > 0}
<ul class="usa-sidenav__sublist">
{#each children as { id, ...child } (id)}
<svelte:self {...child} {currentPath} />
{/each}
</ul>
{/if}
</li>
|