Merge branch 'link-to-editor'

src/lib/components/MainLayout.svelte

@@ -4,7 +4,14 @@
       <a>The Docks</a>
     </h1>
     <h3 class="max">a Full Thrust ship builder</h3>
-    <a>About</a>
+    <div class="tabs in left-align">
+      <a class="spaced" class:active={currentPath === "/"} href="/">Editor</a>
+      <a
+        class="spaced"
+        class:active={currentPath.startsWith("/about")}
+        href="/about">About</a
+      >
+    </div>
     <span>&nbsp;</span>
   </nav>
 </header>
@@ -13,7 +20,10 @@
 </main>
 
 <script>
+  import { page } from "$app/stores";
   import "$lib/style/index.js";
+
+  $: currentPath = $page.url.pathname;
 </script>
 
 <style>
@@ -25,4 +35,13 @@
     font-size: var(--font-scale-12);
     font-weight: normal;
   }
+  a.spaced {
+    min-width: 5em;
+  }
+  span {
+    width: 5em;
+  }
+  .tabs {
+    border-bottom: 0px;
+  }
 </style>

src/lib/components/MainLayout.test.js

@@ -0,0 +1,15 @@
+import { readable } from "svelte/store";
+import { test, expect, vi } from "vitest";
+import { render } from "@testing-library/svelte";
+
+vi.mock("$app/stores", () => ({
+  page: readable({ url: { pathname: "/" } }),
+}));
+
+import MainLayout from "./MainLayout.svelte";
+
+test("we have an editor link", () => {
+  const { queryByText } = render(MainLayout);
+
+  expect(queryByText("Editor")).toBeTruthy();
+});