enhanced nav tree

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["resumarkdown"]
+  "cSpell.words": ["resumarkdown", "spacebar"]
 }

src/lib/components/nav-item.svelte

@@ -1,4 +1,29 @@
-<li><slot /></li>
+<script lang="ts">
+  import { pane, type Pane } from '$lib/stores/nav';
+
+  export let destination: Pane;
+
+  function handleKey({ key }: KeyboardEvent) {
+    if (key === ' ' || key === 'Enter' || key === 'Spacebar') {
+      navigate();
+    }
+  }
+
+  function navigate() {
+    pane.set(destination);
+  }
+</script>
+
+<li
+  aria-controls="nav-tree"
+  aria-selected={$pane === destination}
+  role="tab"
+  tabindex="0"
+  on:click={navigate}
+  on:keyup={handleKey}
+>
+  <slot />
+</li>
 
 <style lang="less">
   li {

src/lib/components/nav-tree.svelte

@@ -1,5 +1,5 @@
 <nav>
-  <ul>
+  <ul id="nav-tree" role="tablist">
     <slot />
   </ul>
 </nav>

src/lib/stores/nav.ts

@@ -0,0 +1,5 @@
+import { writable } from 'svelte/store';
+
+export type Pane = 'content' | 'style' | 'preview';
+
+export const pane = writable<Pane>('content');

src/routes/+page.svelte

@@ -10,8 +10,8 @@
 <header>
   <Headline>resumarkdown</Headline>
   <NavTree>
-    <NavItem>content</NavItem>
-    <NavItem>style</NavItem>
-    <NavItem>preview</NavItem>
+    <NavItem destination="content">content</NavItem>
+    <NavItem destination="style">style</NavItem>
+    <NavItem destination="preview">preview</NavItem>
   </NavTree>
 </header>