From d7158ced734173b6a51c56d728ee96ab856d298a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 23 Nov 2024 20:38:48 -0800
Subject: [PATCH] test: scaffold App UI

---
 tests/App.test.svelte | 53 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 51 insertions(+), 2 deletions(-)

diff --git a/tests/App.test.svelte b/tests/App.test.svelte
index 3ef5ac3d..de04ad2f 100644
--- a/tests/App.test.svelte
+++ b/tests/App.test.svelte
@@ -1,5 +1,54 @@
-<script>
+<script lang="ts">
+  import { TreeView as TreeViewNav } from "carbon-components-svelte";
   import TreeView from "./TreeView/TreeView.test.svelte";
+  import { onMount } from "svelte";
+
+  const routes = [
+    {
+      path: "/treeview",
+      name: "TreeView",
+      component: TreeView,
+    },
+  ] as const;
+
+  let currentPath = window.location.pathname;
+
+  function navigate(path: string) {
+    history.pushState({}, "", path);
+    currentPath = path;
+  }
+
+  onMount(() => {
+    const handlePopState = () => {
+      currentPath = window.location.pathname;
+    };
+
+    window.addEventListener("popstate", handlePopState);
+
+    return () => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  });
 </script>
 
-<TreeView />
+<div style:display="flex">
+  <div>
+    <TreeViewNav
+      labelText="Routes"
+      nodes={routes.map((route) => ({
+        id: route.path,
+        text: route.name,
+      }))}
+      on:select={(e) => {
+        navigate(e.detail.id.toString());
+      }}
+    />
+  </div>
+  <div style:flex="1">
+    {#each routes as route (route.path)}
+      {#if currentPath === route.path}
+        <svelte:component this={route.component} />
+      {/if}
+    {/each}
+  </div>
+</div>