add nav tree

src/lib/components/nav-item.svelte

@@ -0,0 +1,13 @@
+<li><slot /></li>
+
+<style lang="less">
+  li {
+    margin: 0;
+    padding: @padding-md;
+    text-align: center;
+  }
+
+  li:not(:last-of-type) {
+    border-bottom: 1px solid @color-dark;
+  }
+</style>

src/lib/components/nav-tree.svelte

@@ -0,0 +1,14 @@
+<nav>
+  <ul>
+    <slot />
+  </ul>
+</nav>
+
+<style lang="less">
+  ul {
+    border-bottom: 2px solid @color-dark;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+</style>

src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import Headline from '$lib/components/headline.svelte';
+  import NavItem from '$lib/components/nav-item.svelte';
+  import NavTree from '$lib/components/nav-tree.svelte';
 </script>
 
 <svelte:head>
@@ -7,4 +9,9 @@
 </svelte:head>
 <header>
   <Headline>resumarkdown</Headline>
+  <NavTree>
+    <NavItem>content</NavItem>
+    <NavItem>style</NavItem>
+    <NavItem>preview</NavItem>
+  </NavTree>
 </header>

tests/test.ts

@@ -6,3 +6,8 @@ test('page has headline', async ({ page }) => {
   await expect(headline).toBeVisible();
   await expect(headline).toHaveText('resumarkdown');
 });
+
+test('page has nav tree', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('nav')).toBeVisible();
+});