[ALS-5794] Add navigation and layout elements (#4)

- Change formatting rule to replace tabs with spaces
- Add fort awesome for icon support

src/lib/content.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let title = 'Unknown page title';
+</script>
+
+<section class="main-content">
+  <h1 class="h1 mb-4">
+    {title}
+  </h1>
+  <slot />
+</section>

src/lib/navigation.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  import { AppBar } from '@skeletonlabs/skeleton';
+  import logo from '$lib/assets/app-logo.png';
+
+  const routes = [
+    { path: '/', id: 'home', text: 'Home' },
+    { path: '/explorer', text: 'Query Builder' },
+    { path: '/users', text: 'Users' },
+    { path: '/api', text: 'API' },
+    { path: '/dataset', text: 'Dataset Management' },
+    { path: '/help', text: 'Help' },
+    { path: '/admin', text: 'Admin' },
+    { path: '/admin/super', text: 'Super Admin' },
+    { path: '/#', id: 'logout', text: 'Logout' }
+  ];
+
+  function getId({ path, id }: { path: string; id?: string; text: string }) {
+    return `nav-link` + (id ? `-` + id : path.replaceAll('/', '-'));
+  }
+</script>
+
+<AppBar padding="p-0">
+  <svelte:fragment slot="lead">
+    <img id="nav-logo" alt="PIC-Sure logo" src={logo} class="mx-1" />
+  </svelte:fragment>
+  <svelte:fragment slot="trail">
+    <nav id="page-navigation">
+      {#each routes as route}
+        <a
+          id={getId(route)}
+          href={route.path}
+          aria-current={$page.url.pathname === route.path ? 'page' : undefined}>{route.text}</a
+        >
+      {/each}
+    </nav>
+  </svelte:fragment>
+</AppBar>

tests/test.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/test';
+
+const routes = [
+  { path: '/', id: 'nav-link-home', headerText: 'Home' },
+  { path: '/explorer', id: 'nav-link-explorer', headerText: 'Explorer/Query Builder' },
+  { path: '/users', id: 'nav-link-users', headerText: 'Users' },
+  { path: '/api', id: 'nav-link-api', headerText: 'API' },
+  { path: '/dataset', id: 'nav-link-dataset', headerText: 'Dataset Management' },
+  { path: '/help', id: 'nav-link-help', headerText: 'Help' },
+  { path: '/admin', id: 'nav-link-admin', headerText: 'Admin' },
+  { path: '/admin/super', id: 'nav-link-admin-super', headerText: 'Super Admin' }
+];
+
+test.describe('Navigation', () => {
+  routes.forEach((route) => {
+    test(`${route.path} page has expected heading`, async ({ page }) => {
+      await page.goto('/');
+      const navItem = page.locator('#' + route.id);
+      await navItem.click();
+      await expect(page.locator('.main-content>h1')).toHaveText(route.headerText);
+    });
+    test(`${route.path} navigation bar has correct active element`, async ({ page }) => {
+      await page.goto(route.path);
+
+      // Check that this element is active
+      const navItem = page.locator('#' + route.id);
+      await expect(navItem).toHaveAttribute('aria-current', 'page');
+
+      // Check that other elements aren't active
+      const inactive = routes
+        .filter((altRoute) => altRoute.path !== route.path)
+        .map((altRoute) => {
+          const navItem = page.locator('#' + altRoute.id);
+          return expect(navItem).not.toHaveAttribute('aria-current');
+        });
+      await Promise.all(inactive);
+    });
+  });
+});